diff --git a/src/assets/main.scss b/src/assets/main.scss
index 29a00b5..9b2f7e5 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -2,53 +2,127 @@
 @tailwind components;
 @tailwind utilities;
 
-label {
-  @apply text-gray-800 block pb-1;
-}
-
-h1,h2,h3,h4,h5,h6 {
-  @apply pb-3;
+@mixin text {
+  @apply text-gray-600
 }
 
 p {
-  @apply text-gray-600 pb-4;
+  @include text;
+  @apply pb-4;
 }
-
 .container {
   @apply mx-auto px-6;
 }
 
-input {
+
+/**
+ * Headers
+ */
+h1,h2,h3,h4,h5,h6 {
+  @apply pb-3;
+}
+h1 {
+  @apply text-3xl pb-5;
+}
+h2 {
+  @include text;
+  @apply text-lg font-medium;
+}
+
+/**
+ * Alerts
+ */
+.alert {
+  @apply text-sm;
   &.error {
-    @apply border-red-500;
+    @apply text-red-600;
   }
 }
 
 /**
- * Button's
+ * Forms
  */
-.btn {
+form {
+  fieldset {
+    @apply pb-6;
+  }
+  label {
+    @include text;
+    @apply block font-medium text-gray-700 pb-2;
+  }
+  [type='text'],
+  [type='email'],
+  [type='url'],
+  [type='password'],
+  [type='number'],
+  [type='date'],
+  [type='datetime-local'],
+  [type='month'],
+  [type='search'],
+  [type='tel'],
+  [type='time'],
+  [type='week'],
+  // [multiple],
+  textarea,
+  select {
+    @apply flex-1 block w-full rounded-md shadow-sm border-gray-300 focus:ring-indigo-500 focus:border-indigo-500;
+    &.error {
+      @apply border-red-500;
+    }
+  }
+
+  .prepend {
+    @apply flex rounded-md shadow-sm;
+    span {
+      @apply inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500;
+    }
+    input {
+      @apply rounded-l-none;
+    }
+  }
+}
+
+/**
+ * Buttons
+ */
+button {
   &.loading {
-    @apply relative;
-    color: transparent;
+    @apply relative text-transparent cursor-wait;
     &:after {
       content: '';
       left: calc(50% - 0.75rem);
-      @apply absolute w-6 h-6 border-b-2 border-white rounded-full animate-spin;
+      @apply absolute w-5 h-5 border-b-2 border-white rounded-full animate-spin;
     }
   }
   &.btn-lg {
     @apply py-6 px-8 text-2xl;
   }
+  &:disabled {
+    @apply bg-gray-300;
+    &:hover {
+      @apply bg-gray-300;
+    }
+  }
 }
 
 /**
- * Table's
+ * Tables
  */
 table {
   &.table {
+    @apply w-full;
     td, th {
-      @apply px-6 py-4 border-b;
+      @include text;
+      @apply px-4 py-2 border-b text-left;
+    }
+    &.stripe {
+      tbody {
+        tr {
+          &:nth-child(even) {
+            @apply bg-gray-100;
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/modules/tailwind.js b/src/modules/tailwind.js
index e8dfa76..ce13154 100644
--- a/src/modules/tailwind.js
+++ b/src/modules/tailwind.js
@@ -26,40 +26,18 @@ import {
   // TDialog,
 } from 'vue-tailwind/dist/components'
 
-// Class's applied to any interactive element
-const interactiveFocus = 'focus:outline-none focus:ring focus:border-blue-300';
-
-// Generic class's for all form elements
-const formClasses = 'w-full rounded border-gray-400' +
-  ' focus:outline-none focus:ring focus:border-blue-300' +
-  interactiveFocus
-
 const settings = {
   't-button': {
     component: TButton,
-    props: {
-      classes: 'btn bg-red-500 hover:bg-red-700 text-white font-bold py-3' +
-        ' px-4 w-100 rounded w-full uppercase drop-shadow-md ' +
-        interactiveFocus,
-    }
   },
   't-input': {
     component: TInput,
-    props: {
-      classes: formClasses
-    }
   },
   't-textarea': {
     component: TTextarea,
-    props: {
-      classes: formClasses
-    }
   },
   't-select': {
     component: TSelect,
-    props: {
-      classes: formClasses
-    }
   }
 }
 
diff --git a/src/views/index.vue b/src/views/index.vue
index aea7e65..fb5aef3 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,23 +1,110 @@
 <template>
-  <div class="text-center p-8">
-    <h1 class="text-3xl pb-5">
-      {{ $t(`${localePath}.intro.title`, { siteName: $siteName }) }}
-    </h1>
-    <p>
-      {{ $t(`${localePath}.intro.p-1`) }}
-    </p>
-    <p>
-      <a
-        :href="$siteDomain"
-        class="hover:text-blue-500"
-      >
-        <font-awesome-icon
-          :icon="['fab', 'github']"
-          class="mr-1"
+  <!-- eslint-disable max-len -->
+  <div class="p-8">
+    <div class="text-center">
+      <h1>
+        {{ $t(`${localePath}.intro.title`, { siteName: $siteName }) }}
+      </h1>
+      <p class="text-lg font-light">
+        {{ $t(`${localePath}.intro.p-1`) }}
+      </p>
+      <p class="text-sm">
+        <a
+          :href="$siteDomain"
+          class="hover:text-blue-500 p-2"
+        >
+          <font-awesome-icon
+            :icon="['fab', 'github']"
+            class="mr-1"
+          />
+          {{ $siteDomain }}
+        </a>
+      </p>
+    </div>
+
+    <hr class="my-8" />
+
+    <form class="max-w-md mx-auto">
+      <h2>Form example</h2>
+
+      <fieldset>
+        <label for="example-1">
+          Regular input
+        </label>
+        <t-input
+          id="example-1"
+          placeholder="Input placeholder"
+        />
+      </fieldset>
+
+      <fieldset>
+        <label for="example-2">
+          Has an error
+        </label>
+        <t-input
+          id="example-2"
+          class="error"
+          placeholder="Input placeholder"
         />
-        {{ $siteDomain }}
-      </a>
-    </p>
+        <div class="alert error mt-1">
+          Please enter a value
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <label for="example-3">
+          Input with prepend
+        </label>
+        <div class="prepend">
+          <span>
+            http://
+          </span>
+          <t-input
+            id="example-3"
+            placeholder="Input placeholder"
+            class="rounded-l-none"
+          />
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <div class="grid sm:grid-cols-3 gap-4">
+          <t-button>
+            Submit
+          </t-button>
+          <t-button
+            class="loading"
+            disabled
+          >
+            Loading
+          </t-button>
+        </div>
+      </fieldset>
+    </form>
+
+    <hr class="my-8" />
+
+    <div class="max-w-md mx-auto">
+      <h2>Table example</h2>
+      <table class="table stripe">
+        <thead>
+          <tr>
+            <th>Header 1</th>
+            <th>Header 2</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Val 1</td>
+            <td>Val 2</td>
+          </tr>
+          <tr>
+            <td>Val 1.1</td>
+            <td>Val 2.1</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>