extraer componentes

aley25 · Jan 29, 2020 · 894b82e · 894b82e
1 parent c3a2628
commit 894b82e
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 17 deletions.
diff --git a/css/tailwind.css b/css/tailwind.css
@@ -1,5 +1,23 @@
 @tailwind base;
 
 @tailwind components;
+.form-control {
+  @apply w-full leading-snug text-gray-800 py-1 px-4 rounded border border-blue-300 bg-gray-300;
+}
+.form-control:hover {
+  @apply bg-white;
+}
+.form-control:focus {
+  @apply outline-none shadow-outline;
+}
+.btn {
+  @apply rounded shadow-lg py-1 px-4 bg-gray-500 mx-auto block;
+}
+.btn-primary {
+  @apply bg-yellow-600;
+}
+.btn:hover {
+  @apply shadow-none bg-gray-700 text-white;
+}
 
 @tailwind utilities;
diff --git a/public/css/style.css b/public/css/style.css
@@ -627,6 +627,52 @@ video {
   }
 }
 
+.form-control {
+  width: 100%;
+  line-height: 1.375;
+  color: #2d3748;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  border-color: #90cdf4;
+  background-color: #e2e8f0;
+}
+
+.form-control:hover {
+  background-color: #fff;
+}
+
+.form-control:focus {
+  outline: 0;
+  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+.btn {
+  border-radius: 0.25rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  background-color: #a0aec0;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+
+.btn-primary {
+  background-color: #d69e2e;
+}
+
+.btn:hover {
+  box-shadow: none;
+  background-color: #4a5568;
+  color: #fff;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;

diff --git a/public/home.html b/public/home.html
@@ -43,26 +43,26 @@ <h2 class="text-xl tracking-tight font-semibold uppercase text-gray-900">Hamburg
                     <div class="mt-2 text-xs text-yellow-700">&starf;&starf;&starf;&starf;&star; / 36 reseñas</div>
                 </div>
             </div>
-            <div class="mx-2">
-                <div>
-                    <div> Nombre </div>
-                    <input class="w-full leading-snug text-gray-800 py-1 px-4 rounded border border-blue-300 bg-gray-300 placeholder-secondary hover:bg-white focus:outline-none focus:shadow-outline" type="text" placeholder="Nombre">
-                </div>
-                <div>
-                    <div> Email </div>
-                    <input class="w-full leading-snug text-gray-800 py-1 px-4 rounded border border-blue-300 bg-gray-300 placeholder-secondary hover:bg-white focus:outline-none focus:shadow-outline" type="email" placeholder="Email">
-                </div>
-                <div>
-                    <div> Comentarios </div>
-                    <textarea class="w-full leading-snug text-gray-800 py-1 px-4 rounded border border-blue-300 bg-gray-00 placeholder-secondary hover:bg-white focus:outline-none focus:shadow-outline" name="" id="" cols="30" rows="10"></textarea>
-                </div>
-                <div>
-                    <button class="rounded shadow-x py-1 px-4 bg-gray-500 mx-auto block hover:shadow-none hover:bg-gray-700 hover:text-white">Enviar</button>
-                </div>
-
+        </div>
+        <div class="container mx-auto mt-4 mx-2">
+            <div>
+                <div> Nombre </div>
+                <input class="form-control" type="text" placeholder="Nombre">
+            </div>
+            <div>
+                <div> Email </div>
+                <input class="form-control" type="email" placeholder="Email">
+            </div>
+            <div>
+                <div> Comentarios </div>
+                <textarea class="form-control" name="" id="" cols="30" rows="10"></textarea>
+            </div>
+            <div>
+                <button class="btn btn-primary">Enviar</button>
             </div>
 
         </div>
+
     </main>
     <footer class="w-full text-white bg-secondary">
         <div class="md:flex md:flex-row-reverse justify-around ">