Wireframe Layouts
Latest Tailwind Components
Responsive HTML building blocks for marketing, applications, dashboards and more.
Application
Ecommerce
Marketing
Multi-level dropdown
Preview<nav class="bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
<svg viewBox="0 0 200 193" fill="none" width="70" height="70" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="h-auto w-full md:h-12 lg:h-14">
<g filter="url(#filter0_d_148_36)">
<circle cx="99.5" cy="92.5" r="92.5" fill="#050505"></circle>
</g>
<path d="M68 154V138H52V122H36V74H52V58H68V42H132V58H148V74H116V58H84V74H68V122H84V138H116V122H148V138H132V154H68Z" fill="#7444FD"></path>
<rect x="81" y="79.9999" width="37" height="37" rx="18" fill="url(#pattern0_148_36)"></rect>
<defs>
<filter id="filter0_d_148_36" x="3" y="0" width="193" height="193" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
<feOffset dy="4"></feOffset>
<feGaussianBlur stdDeviation="2"></feGaussianBlur>
<feComposite in2="hardAlpha" operator="out"></feComposite>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_148_36"></feBlend>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_148_36" result="shape"></feBlend>
</filter>
<pattern id="pattern0_148_36" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_148_36" transform="scale(0.00666667)"></use>
</pattern>
<image id="image0_148_36" width="150" height="150" preserveAspectRatio="none" xlink:href="data:image/jpeg;base64,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"></image>
</defs>
</svg>
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Cupstack</span>
</a>
<button data-collapse-toggle="navbar-multi-level" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-multi-level" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="navbar-multi-level">
<ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent" aria-current="page">Home</a>
</li>
<li>
<button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex items-center justify-between w-full py-2 px-3 text-gray-900 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Dropdown <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg></button>
<!-- Dropdown menu -->
<div id="dropdownNavbar" class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700 dark:divide-gray-600">
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownLargeButton">
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
</li>
<li aria-labelledby="dropdownNavbarLink">
<button id="doubleDropdownButton" data-dropdown-toggle="doubleDropdown" data-dropdown-placement="right-start" type="button" class="flex items-center justify-between w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dropdown<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg></button>
<div id="doubleDropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700">
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="doubleDropdownButton">
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Overview</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My downloads</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Billing</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Rewards</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
</li>
</ul>
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign out</a>
</div>
</div>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Services</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Pricing</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Popup Modal
PreviewAre you sure you want to delete this product?
<button data-modal-target="popup-modal" data-modal-toggle="popup-modal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
Toggle modal
</button>
<div id="popup-modal" tabindex="-1" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-md max-h-full">
<div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
<button type="button" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="popup-modal">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Close modal</span>
</button>
<div class="p-4 md:p-5 text-center">
<svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
</svg>
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to delete this product?</h3>
<button data-modal-hide="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
Yes, I'm sure
</button>
<button data-modal-hide="popup-modal" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">No, cancel</button>
</div>
</div>
</div>
</div>
Static Modal
Preview<!-- Modal toggle -->
<button data-modal-target="static-modal" data-modal-toggle="static-modal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
Toggle modal
</button>
<!-- Main modal -->
<div id="static-modal" data-modal-backdrop="static" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-2xl max-h-full">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
<!-- Modal header -->
<div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
Static modal
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="static-modal">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-4 md:p-5 space-y-4">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
<button data-modal-hide="static-modal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
<button data-modal-hide="static-modal" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Decline</button>
</div>
</div>
</div>
</div>
Default Modal
Preview<!-- Modal toggle -->
<button data-modal-target="default-modal" data-modal-toggle="default-modal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
Toggle modal
</button>
<!-- Main modal -->
<div id="default-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-2xl max-h-full">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
<!-- Modal header -->
<div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
Terms of Service
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-4 md:p-5 space-y-4">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
<button data-modal-hide="default-modal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
<button data-modal-hide="default-modal" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Decline</button>
</div>
</div>
</div>
</div>
Input element with icon
Preview<form class="max-w-sm mx-auto">
<label for="email-address-icon" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your Email</label>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
<path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"/>
<path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"/>
</svg>
</div>
<input type="text" id="email-address-icon" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="[email protected]">
</div>
</form>
Helper text
Preview<form class="max-w-sm mx-auto">
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
<input type="email" id="email" aria-describedby="helper-text-explanation" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="[email protected]">
<p id="helper-text-explanation" class="mt-2 text-sm text-gray-500 dark:text-gray-400">We’ll never share your details. Read our <a href="#" class="font-medium text-blue-600 hover:underline dark:text-blue-500">Privacy Policy</a>.</p>
</form>
Shadow Inputs
Preview<form class="max-w-sm mx-auto">
<div class="mb-5">
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
<input type="email" id="email" class="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-xs-light" placeholder="[email protected]" required />
</div>
<div class="mb-5">
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your password</label>
<input type="password" id="password" class="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-xs-light" required />
</div>
<div class="mb-5">
<label for="repeat-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Repeat password</label>
<input type="password" id="repeat-password" class="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-xs-light" required />
</div>
<div class="flex items-start mb-5">
<div class="flex items-center h-5">
<input id="terms" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800" required />
</div>
<label for="terms" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">I agree with the <a href="#" class="text-blue-600 hover:underline dark:text-blue-500">terms and conditions</a></label>
</div>
<button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Register new account</button>
</form>
Input Sizes
Preview<form class="max-w-sm mx-auto">
<div class="mb-5">
<label for="large-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Large input</label>
<input type="text" id="large-input" class="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
</div>
<div class="mb-5">
<label for="base-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Base input</label>
<input type="text" id="base-input" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
</div>
<div>
<label for="small-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Small input</label>
<input type="text" id="small-input" class="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
</div>
</form>
Floating labels
Preview<form class="max-w-md mx-auto">
<div class="relative z-0 w-full mb-5 group">
<input type="email" name="floating_email" id="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
<label for="floating_email" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Email address</label>
</div>
<div class="relative z-0 w-full mb-5 group">
<input type="password" name="floating_password" id="floating_password" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
<label for="floating_password" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Password</label>
</div>
<div class="relative z-0 w-full mb-5 group">
<input type="password" name="repeat_password" id="floating_repeat_password" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
<label for="floating_repeat_password" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Confirm password</label>
</div>
<div class="grid md:grid-cols-2 md:gap-6">
<div class="relative z-0 w-full mb-5 group">
<input type="text" name="floating_first_name" id="floating_first_name" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
<label for="floating_first_name" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">First name</label>
</div>
<div class="relative z-0 w-full mb-5 group">
<input type="text" name="floating_last_name" id="floating_last_name" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
<label for="floating_last_name" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Last name</label>
</div>
</div>
<div class="grid md:grid-cols-2 md:gap-6">
<div class="relative z-0 w-full mb-5 group">
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" name="floating_phone" id="floating_phone" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
<label for="floating_phone" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Phone number (123-456-7890)</label>
</div>
<div class="relative z-0 w-full mb-5 group">
<input type="text" name="floating_company" id="floating_company" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
<label for="floating_company" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Company (Ex. Google)</label>
</div>
</div>
<button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
</form>
Default form
Preview<form class="max-w-sm mx-auto">
<div class="mb-5">
<label for="email" class="block mb-2 text-sm font-medium text-gray-900">Your email</label>
<input type="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="[email protected]" required />
</div>
<div class="mb-5">
<label for="password" class="block mb-2 text-sm font-medium text-gray-900">Your password</label>
<input type="password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
</div>
<div class="flex items-start mb-5">
<div class="flex items-center h-5">
<input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300" required />
</div>
<label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember me</label>
</div>
<button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Submit</button>
</form>