Framework
Theme
All
217
Headers
12
Testimonials
7
Logo Areas
6
Stats
6
Http Codes
4
Navbars
13
Pricing
6
Contact Us
6
Faq
6
Teams
7
Features
6
Call To Actions
8
Authentication
5
Blogs
4
General
1
Contents
6
Sidebars
6
Components
23
Cards Section
8
Forms
7
Tables Section
3
Typography
14
Teams Section
3
Profiles Section
5
Tables
8
Cards
17
Projects Section
3
Charts
7
Charts Section
3
Tailwind Forms
Discover 7 Tailwind Forms available in Loopple
Form Contact
Component from
Riva Dashboard Tailwind
Builder
<div class="relative flex-[1_auto] flex flex-col break-words min-w-0 bg-clip-border rounded-xl border border-dashed border-stone-200 bg-white mb-5 draggable">
<!-- card body -->
<div class="flex-auto block py-8 px-9">
<form action="#" method="post" class="group/form">
<div class="flex flex-col mb-9">
<h1 class="font-semibold text-3xl text-dark mb-2 font-display">Contact Us</h1>
<span class="text-lg font-medium text-muted block"> Feel free to reach out to us with any questions or inquiries. We'll be happy to assist you! </span>
</div>
<div class="flex flex-wrap mb-5 -mx-3">
<div class="w-1/2 px-3">
<label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Name"> Full Name </label>
<input type="text" name="Name" id="Name" value="" class="peer w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter your full name" required="">
</div>
<div class="w-1/2 px-3">
<label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Email"> Email Address </label>
<input type="email" name="Email" id="Email" class="peer w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter your email address" required="">
</div>
</div>
<div class="w-full mb-5">
<label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Subject"> Subject </label>
<input type="text" name="Subject" id="Subject" class="w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter the subject">
</div>
<div class="w-full mb-10">
<label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Message"> Message </label>
<textarea rows="6" type="text" name="Message" id="Message" class="w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter your message"></textarea>
</div>
<div class="text-end">
<button class="inline-block text-base font-medium leading-normal text-center align-middle cursor-pointer rounded-xl transition-colors duration-150 ease-in-out text-white bg-dark shadow-none border-0 px-5 py-4 hover:bg-dark-dark active:bg-dark-dark focus:bg-dark-dark ms-auto" type="submit">Send Message</button>
</div>
</form>
</div>
</div>Register Form
Form Application
Login Form
Form Profile Settings
Component from
Soft UI Dashboard Tailwind
Builder
<div class="relative flex flex-col h-full min-w-0 break-words bg-white border-0 shadow-soft-xl rounded-2xl bg-clip-border draggable">
<div class="p-4 pb-0 mb-0 bg-white border-b-0 rounded-t-2xl">
<h6 class="mb-0 font-display">Platform Settings</h6>
</div>
<div class="flex-auto p-4">
<h6 class="font-bold leading-tight uppercase text-xs text-slate-500">Account</h6>
<ul class="flex flex-col pl-0 mb-0 rounded-lg">
<li class="relative block px-0 py-2 bg-white border-0 rounded-t-lg text-inherit">
<div class="min-h-6 mb-0.5 block pl-0">
<input id="follow" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox" checked>
<label for=" follow" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Email me when someone follows me</label>
</div>
</li>
<li class="relative block px-0 py-2 bg-white border-0 text-inherit">
<div class="min-h-6 mb-0.5 block pl-0">
<input id="answer" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox">
<label for="answer" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Email me when someone answers on my post</label>
</div>
</li>
<li class="relative block px-0 py-2 bg-white border-0 rounded-b-lg text-inherit">
<div class="min-h-6 mb-0.5 block pl-0">
<input id="mention" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox" checked="">
<label for="mention" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Email me when someone mentions me</label>
</div>
</li>
</ul>
<h6 class="mt-6 font-bold leading-tight uppercase text-xs text-slate-500">Application</h6>
<ul class="flex flex-col pl-0 mb-0 rounded-lg">
<li class="relative block px-0 py-2 bg-white border-0 rounded-t-lg text-inherit">
<div class="min-h-6 mb-0.5 block pl-0">
<input id="launches projects" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox">
<label for="launches projects" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">New launches and projects</label>
</div>
</li>
<li class="relative block px-0 py-2 bg-white border-0 text-inherit">
<div class="min-h-6 mb-0.5 block pl-0">
<input id="product updates" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox" checked="">
<label for="product updates" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Monthly product updates</label>
</div>
</li>
<li class="relative block px-0 py-2 pb-0 bg-white border-0 rounded-b-lg text-inherit">
<div class="min-h-6 mb-0.5 block pl-0">
<input id="subscribe" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox">
<label for="subscribe" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Subscribe to newsletter</label>
</div>
</li>
</ul>
</div>
</div>
