Form inputs
Form inputs, search input, and more designed with TailwindCSS
Simple
Screen Size:
<div class="mb-4 px-2 w-full">
<label class="block mb-1 text-sm" for="input1">Full name:</label>
<input id="input1" class="w-full border px-4 py-2 rounded focus:border-blue-500 focus:shadow-outline outline-none" type="text" autofocus placeholder="Full name..." />
</div>
Fully rounded
Screen Size:
<div class="mb-4 px-2 w-full">
<label class="block mb-1 text-sm" for="input1">Full name:</label>
<input id="input1" class="w-full border px-4 py-2 rounded-full focus:border-blue-500 focus:shadow-outline outline-none outline-none" type="text" placeholder="Full name..." />
</div>
Failed input with error message
Screen Size:
<div class="mb-4 px-2 w-full">
<label class="block mb-1 text-sm" for="input2">Failed input</label>
<input id="input2" class="w-full border-red-500 border px-4 py-2 rounded focus:border focus:border-blue-500 focus:shadow-outline outline-none" type="text" placeholder="Input placeholder..." />
<div class="text-xs text-red-600 mt-1">Name field is required</div>
</div>
Success input
Screen Size:
<div class="mb-4 px-2 w-full">
<label class="block mb-1 text-sm" for="input3">Success input</label>
<input id="input3" class="w-full border-green-500 border px-4 py-2 rounded focus:border focus:border-blue-500 focus:shadow-outline outline-none" type="text" placeholder="Input placeholder..." />
</div>
Input with text before
Screen Size:
<div class="mb-4 px-2 w-full">
<label class="block mb-2 text-sm" for="pretext-input">Twitter username</label>
<div class="flex w-full">
<div class="bg-gray-100 flex items-center px-4 py-2 border border-r-0 rounded-l text-sm font-medium text-gray-800 select-none">
https://twitter.com/
</div>
<div class="flex-1">
<input id="pretext-input" class="w-full border px-4 py-2 rounded-r focus:border-blue-500 focus:shadow-outline outline-none" type="text" placeholder="@username..." />
</div>
</div>
</div>
Input with search icon inside it
Screen Size:
<div class="mb-4 px-2 w-full">
<div class="relative">
<div class="absolute left-0 inset-y-0 pl-3 flex items-center">
<svg class="fill-current h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z" /></svg>
</div>
<input class="w-full border pl-12 pr-4 py-2 rounded-full focus:border-blue-500 focus:shadow-outline outline-none" type="text" placeholder="Search..." />
</div>
</div>
Textarea
Screen Size:
<div class="mb-4 px-2 w-full">
<label class="block mb-1 text-sm" for="textarea1">Textarea</label>
<textarea id="textarea1" class="w-full border px-4 py-2 rounded focus:border-blue-500 focus:shadow-outline outline-none" rows="5" placeholder="Textarea placeholder..."></textarea>
</div>
Number input with increase and decrease buttons
Screen Size:
Requires JS
usage example
<div id="app">
<v-number name="quantity"></v-number>
</div>
<script>
Vue.component("v-number", require("components/v-number.vue"));
new Vue({
el: "#app",
});
</script>
v-number.vue
<template>
<div class="inline-flex">
<div class="select-none border py-2 px-4 cursor-pointer bg-gray-100 hover:bg-gray-200 rounded-l" @click="decrease">
-
</div>
<input class="border p-2 text-center outline-none" type="text" v-model="number" :name="name" />
<div class="select-none border py-2 px-4 cursor-pointer bg-gray-100 hover:bg-gray-200 rounded-r" @click="increase">
+
</div>
</div>
</template>
<script>
export default {
data() {
return {
number: 1,
};
},
props: {
name: {
type: String,
required: true,
},
},
methods: {
increase() {
this.number++;
},
decrease() {
if (this.number > 1) {
this.number--;
}
},
},
};
</script>
Simple Select
Screen Size:
<div class="mb-4 px-2 w-full">
<label class="block mb-1 text-sm" for="select-item">Country:</label>
<div class="relative">
<select class="w-full border px-4 pr-8 py-2 rounded focus:border-blue-500 focus:shadow-outline outline-none appearance-none" id="select-item">
<option>Singapore</option>
<option>Luxembourg</option>
<option>Italy</option>
<option>Germany</option>
<option>USA</option>
<option>Canada</option>
<option>Brazil</option>
<option>UAE</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
</svg>
</div>
</div>
</div>
Designed and built with ♥ by Saleh Mir. Licensed under the MIT License.