Sign In Wirestock - Tailwind Component
A Tailwind CSS sign in page inspired by wirestock website using the Tailwind login component.
login
Loading component...
158 lines
<section class="text-gray-600 body-font bg-white">
<div class="container px-5 py-16 mx-auto flex flex-wrap items-center">
<div class="lg:w-3/5 lg:pr-8">
<h1 class="title-font font-bold md:text-7xl text-5xl text-black text-center lg:text-left ">The easiest way to sell
photos, vectors & videos online</h1>
<p class="leading-relaxed mt-4 md:text-2xl text-lg lg:max-w-xl font-normal text-gray-800 text-center lg:text-left">
Upload and sell content online on the largest marketplaces. Submit your images, vectors and videos in seconds,
no keywords or captions required.</p>
<img src="https://wirestock.io/static/media/generalInfoIlustration.d8cf4c43.webp" alt="image" class="mt-8">
</div>
<div class="lg:flex hidden lg:w-2/5 bg-white shadow-2xl rounded-lg flex-col w-full">
<div class="text-center my-6">
<h1 class="text-3xl font-semibold text-gray-800">Sign In</h1>
<p class="text-gray-700 mt-2 font-medium">New User? <span
class="text-indigo-500 hover:text-indigo-700 cursor-pointer">Create an Account</span></p>
</div>
<div class="mx-6 pb-8">
<form class="mb-4">
<div class="mb-6">
<label for="email" class="block mb-2 text-sm text-gray-600">Email Address</label>
<input type="email" name="email" id="email" placeholder="Your email address"
class="w-full px-3 py-3 placeholder-gray-300 border border-gray-300 rounded-xl focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 " />
</div>
<div class="mb-6">
<div class="flex justify-between mb-2">
<label for="password" class="text-sm text-gray-600">Password</label>
<a href="#!"
class="text-sm text-gray-400 focus:outline-none focus:text-indigo-500 hover:text-indigo-500 dark:hover:text-indigo-300">Forgot
password?</a>
</div>
<input type="password" name="password" id="password" placeholder="Your password"
class="w-full px-3 py-3 placeholder-gray-300 border border-gray-300 rounded-xl focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 " />
</div>
<div class="mb-6">
<button type="button"
class="w-full px-3 py-3 text-lg text-white bg-indigo-600 rounded-xl hover:bg-indigo-400 focus:outline-none duration-100 ease-in-out font-bold">Sign
In</button>
</div>
</form>
<div class="flex flex-row justify-center mb-8">
<span class="absolute bg-white px-4 text-gray-500">or sign-in with</span>
<div class="w-full bg-gray-200 mt-3 h-px"></div>
</div>
<div class="flex flex-row gap-2">
<button
class="bg-white text-gray-700 border border-gray-700 rounded-xl w-full p-2 flex flex-row justify-center gap-2 items-center hover:bg-gray-100 duration-100 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
role="img" class="w-5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<g fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12c6.627 0 12-5.373 12-12S18.627 0 12 0zm.14 19.018c-3.868 0-7-3.14-7-7.018c0-3.878 3.132-7.018 7-7.018c1.89 0 3.47.697 4.682 1.829l-1.974 1.978v-.004c-.735-.702-1.667-1.062-2.708-1.062c-2.31 0-4.187 1.956-4.187 4.273c0 2.315 1.877 4.277 4.187 4.277c2.096 0 3.522-1.202 3.816-2.852H12.14v-2.737h6.585c.088.47.135.96.135 1.474c0 4.01-2.677 6.86-6.72 6.86z"
fill="currentColor" />
</g>
</svg>
Google
</button>
<button
class="bg-white border border-gray-700 text-gray-700 w-full p-2 flex flex-row justify-center gap-2 items-center rounded-xl hover:bg-gray-100 duration-100 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
role="img" class="w-5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<g fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385c.6.105.825-.255.825-.57c0-.285-.015-1.23-.015-2.235c-3.015.555-3.795-.735-4.035-1.41c-.135-.345-.72-1.41-1.23-1.695c-.42-.225-1.02-.78-.015-.795c.945-.015 1.62.87 1.845 1.23c1.08 1.815 2.805 1.305 3.495.99c.105-.78.42-1.305.765-1.605c-2.67-.3-5.46-1.335-5.46-5.925c0-1.305.465-2.385 1.23-3.225c-.12-.3-.54-1.53.12-3.18c0 0 1.005-.315 3.3 1.23c.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23c.66 1.65.24 2.88.12 3.18c.765.84 1.23 1.905 1.23 3.225c0 4.605-2.805 5.625-5.475 5.925c.435.375.81 1.095.81 2.22c0 1.605-.015 2.895-.015 3.3c0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"
fill="currentColor" />
</g>
</svg>
Github
</button>
</div>
</div>
</div>
<button type="button" data-modal-toggle="defaultModal"
class="mx-auto lg:hidden mt-16 flex px-12 sm:px-24 py-2 text-lg text-white bg-indigo-600 rounded-xl hover:bg-indigo-400 focus:outline-none duration-100 ease-in-out font-bold">Sign
In to Your Account</button>
</div>
</section>
<div id="defaultModal" tabindex="-1" aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full">
<div class="relative p-4 w-full max-w-2xl h-full md:h-auto bg-white mt-16 mx-4">
<div class="relative bg-white">
<div class="flex justify-end items-start py-2 px-5">
<button type="button"
class="text-gray-400 bg-transparent focus:outline-none hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="defaultModal">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="px-6 space-y-6">
<div class="text-center my-6">
<h1 class="text-3xl font-semibold text-gray-800">Sign In</h1>
<p class="text-gray-700 mt-2 font-medium">New User? <span
class="text-indigo-500 hover:text-indigo-700 cursor-pointer">Create an Account</span></p>
</div>
<div class="mx-6 pb-8">
<form class="mb-4">
<div class="mb-6">
<label for="email" class="block mb-2 text-sm text-gray-600">Email Address</label>
<input type="email" name="email" id="email" placeholder="Your email address"
class="w-full px-3 py-3 placeholder-gray-300 border border-gray-300 rounded-xl focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 " />
</div>
<div class="mb-6">
<div class="flex justify-between mb-2">
<label for="password" class="text-sm text-gray-600">Password</label>
<a href="#!"
class="text-sm text-gray-400 focus:outline-none focus:text-indigo-500 hover:text-indigo-500 dark:hover:text-indigo-300">Forgot
password?</a>
</div>
<input type="password" name="password" id="password" placeholder="Your password"
class="w-full px-3 py-3 placeholder-gray-300 border border-gray-300 rounded-xl focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 " />
</div>
<div class="mb-6">
<button type="button"
class="w-full px-3 py-3 text-lg text-white bg-indigo-600 rounded-xl hover:bg-indigo-400 focus:outline-none duration-100 ease-in-out font-bold">Sign
In</button>
</div>
</form>
<div class="flex flex-row justify-center mb-8">
<span class="absolute bg-white px-4 text-gray-500">or sign-in with</span>
<div class="w-full bg-gray-200 mt-3 h-px"></div>
</div>
<div class="flex flex-row gap-2">
<button
class="bg-white text-gray-700 border border-gray-700 rounded-xl w-full p-2 flex flex-row justify-center gap-2 items-center hover:bg-gray-100 duration-100 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
role="img" class="w-5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<g fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12c6.627 0 12-5.373 12-12S18.627 0 12 0zm.14 19.018c-3.868 0-7-3.14-7-7.018c0-3.878 3.132-7.018 7-7.018c1.89 0 3.47.697 4.682 1.829l-1.974 1.978v-.004c-.735-.702-1.667-1.062-2.708-1.062c-2.31 0-4.187 1.956-4.187 4.273c0 2.315 1.877 4.277 4.187 4.277c2.096 0 3.522-1.202 3.816-2.852H12.14v-2.737h6.585c.088.47.135.96.135 1.474c0 4.01-2.677 6.86-6.72 6.86z"
fill="currentColor" />
</g>
</svg>
Google
</button>
<button
class="bg-white border border-gray-700 text-gray-700 w-full p-2 flex flex-row justify-center gap-2 items-center rounded-xl hover:bg-gray-100 duration-100 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
role="img" class="w-5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<g fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385c.6.105.825-.255.825-.57c0-.285-.015-1.23-.015-2.235c-3.015.555-3.795-.735-4.035-1.41c-.135-.345-.72-1.41-1.23-1.695c-.42-.225-1.02-.78-.015-.795c.945-.015 1.62.87 1.845 1.23c1.08 1.815 2.805 1.305 3.495.99c.105-.78.42-1.305.765-1.605c-2.67-.3-5.46-1.335-5.46-5.925c0-1.305.465-2.385 1.23-3.225c-.12-.3-.54-1.53.12-3.18c0 0 1.005-.315 3.3 1.23c.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23c.66 1.65.24 2.88.12 3.18c.765.84 1.23 1.905 1.23 3.225c0 4.605-2.805 5.625-5.475 5.925c.435.375.81 1.095.81 2.22c0 1.605-.015 2.895-.015 3.3c0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"
fill="currentColor" />
</g>
</svg>
Github
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>