<section class="py-24 md:py-32 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
<div class="container px-4 mx-auto">
<div class="max-w-sm mx-auto">
<div class="mb-6 text-center">
<a class="inline-block mb-6" href="#">
<img class="h-16" src="flex-ui-assets/logos/flex-circle-green.svg" alt="">
</a>
<h3 class="mb-4 text-2xl md:text-3xl font-bold">Sign in to your account</h3>
<p class="text-lg text-coolGray-500 font-medium">Start your demo version</p>
</div>
<form action="">
<div class="mb-6">
<label class="block mb-2 text-coolGray-800 font-medium" for="">Email</label>
<input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="email" placeholder="[email protected]">
</div>
<div class="mb-4">
<label class="block mb-2 text-coolGray-800 font-medium" for="">Password</label>
<input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="password" placeholder="************">
</div>
<div class="flex flex-wrap items-center justify-between mb-6">
<div class="w-full md:w-1/2">
<label class="relative inline-flex items-center">
<input class="form-checkbox appearance-none" type="checkbox">
<img class="absolute top-1/2 transform -translate-y-1/2 left-0" src="flex-ui-assets/elements/sign-up/checkbox-icon.svg" alt="">
<span class="ml-7 text-xs text-coolGray-800 font-medium">Remember me</span>
</label>
</div>
<div class="w-full md:w-auto mt-1"><a class="inline-block text-xs font-medium text-green-500 hover:text-green-600" href="#">Forgot your password?</a></div>
</div>
<a class="inline-block py-3 px-7 mb-6 w-full text-base text-green-50 font-medium text-center leading-6 bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Sign In</a>
<p class="text-center">
<span class="text-xs font-medium">Don’t have an account?</span>
<a class="inline-block text-xs font-medium text-green-500 hover:text-green-600 hover:underline" href="#">Sign up</a>
</p>
</form>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
Flex
Component #1
Tailwind Components by Shuffle
Browse 115 of ready-made components in Tailwind and Flex library. They are divided into UI libraries that our professional designers designed. Each of them has a resource of many variations of different types of components. Under each of them, there is a clear code created by our team of developers.
All elements available in the editor are fully responsive. You will get full access to them by subscribing to our drag and drop editor.
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
