Framework
Theme
All
217
Sidebars
6
Components
23
Cards Section
8
Forms
7
Navbars
13
Tables Section
3
Typography
14
Teams Section
3
Profiles Section
5
Tables
8
Cards
17
Projects Section
3
Charts
7
Headers
12
Charts Section
3
Testimonials
7
Logo Areas
6
Stats
6
Http Codes
4
Pricing
6
Contact Us
6
Faq
6
Teams
7
Features
6
Call To Actions
8
Authentication
5
Blogs
4
General
1
Contents
6
Tailwind - All Components
Discover 217 Tailwind components available in Loopple
Call To Action With Text And Subscribe Input
Component from
Motion Landing Library
Builder
<div class="container mx-auto draggable">
<div class="flex flex-col items-center justify-center w-full h-full my-auto text-center">
<h2 class="w-full mb-4 text-4xl font-extrabold leading-tight text-dark-grey-900 font-display">Unlock Motion's Immediate Benefits</h2>
<p class="mb-10 text-lg font-normal lg:w-6/12 text-grey-700">Experience Motion like never before with instant access. Our platform offers unparalleled features and advantages to elevate your experience.</p>
<div class="flex flex-col items-center justify-center w-full gap-4 mb-4 md:flex-row">
<div class="relative flex items-center">
<span class="absolute ml-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-grey-700">
<path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
</svg>
</span>
<input type="search" placeholder="E-mail address" class="flex items-center py-2 pl-10 pr-3 text-sm font-medium border border-solid outline-none grow placeholder:text-dark-grey-500 placeholder:text-sm placeholder:font-medium border-grey-500 focus:border-grey-600 text-dark-grey-900 rounded-xl">
</div>
<button class="flex items-center px-4 py-2 text-sm font-bold text-white border rounded-xl border-purple-blue-500 bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300">Get Free Access</button>
</div>
</div>
</div>Feature With Icon Title And Description
Component from
Motion Landing Library
Builder
<div class="container mx-auto draggable">
<div class="flex flex-col items-center justify-center">
<div class="flex flex-col items-center justify-center mt-12">
<h2 class="mb-4 text-3xl font-extrabold leading-tight text-center lg:text-4xl text-dark-grey-900 font-display">Elevate Your Productivity with Motion</h2>
<p class="text-lg text-center lg:w-7/12 text-grey-700">Unlock the full potential of your workflow with Windbase. Our platform is designed to streamline your operations and boost productivity. Experience the difference as we help you save time and work more efficiently.</p>
</div>
<div class="grid grid-cols-1 gap-10 mt-20 lg:grid-cols-3 md:grid-cols-2">
<div class="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div>
<div class="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
<path d="M22.8233 8C22.8233 7.28 22.4533 6.65 21.8833 6.3L12.8333 1L3.78331 6.3C3.21331 6.65 2.83331 7.28 2.83331 8V18C2.83331 19.1 3.73331 20 4.83331 20H20.8333C21.9333 20 22.8333 19.1 22.8333 18L22.8233 8ZM20.8233 8V8.01L12.8333 13L4.83331 8L12.8333 3.32L20.8233 8ZM4.83331 18V10.34L12.8333 15.36L20.8233 10.37L20.8333 18H4.83331Z" fill="white"/>
</svg>
</div>
</div>
<div class="flex flex-col gap-2 px-2 text-center">
<h4 class="text-2xl font-extrabold text-dark-grey-900 font-display">Streamline Team Communication</h4>
<p class="font-medium text-grey-700">Streamline communication within your team using our shared team inboxes. Enhance collaboration and keep everyone on the same page effortlessly.</p>
</div>
</div>
<div class="flex flex-col items-center col-span-1 gap-6 px-10 py-5 bg-white shadow-main rounded-3xl">
<div>
<div class="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
<path d="M3.28996 14.78L3.19996 14.69C2.80996 14.3 2.80996 13.67 3.19996 13.28L9.28996 7.18C9.67996 6.79 10.31 6.79 10.7 7.18L13.99 10.47L20.38 3.29C20.76 2.86 21.43 2.85 21.83 3.25C22.2 3.63 22.22 4.23 21.87 4.62L14.7 12.69C14.32 13.12 13.66 13.14 13.25 12.73L9.99996 9.48L4.69996 14.78C4.31996 15.17 3.67996 15.17 3.28996 14.78ZM4.69996 20.78L9.99996 15.48L13.25 18.73C13.66 19.14 14.32 19.12 14.7 18.69L21.87 10.62C22.22 10.23 22.2 9.63 21.83 9.25C21.43 8.85 20.76 8.86 20.38 9.29L13.99 16.47L10.7 13.18C10.31 12.79 9.67996 12.79 9.28996 13.18L3.19996 19.28C2.80996 19.67 2.80996 20.3 3.19996 20.69L3.28996 20.78C3.67996 21.17 4.31996 21.17 4.69996 20.78Z" fill="white"/>
</svg>
</div>
</div>
<div class="flex flex-col gap-2 px-2 text-center">
<h4 class="text-2xl font-extrabold text-dark-grey-900 font-display">Gain Insights with Analytics</h4>
<p class="font-medium text-grey-700">Gain valuable insights and data analytics for your team through our analytics dashboard. Make informed decisions and track your progress effectively.</p>
</div>
</div>
<div class="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div>
<div class="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
<path d="M15.8766 12.71C16.857 11.9387 17.5726 10.8809 17.9239 9.68394C18.2751 8.48697 18.2445 7.21027 17.8364 6.03147C17.4283 4.85267 16.6629 3.83039 15.6467 3.10686C14.6305 2.38332 13.4141 1.99451 12.1666 1.99451C10.9192 1.99451 9.70274 2.38332 8.68655 3.10686C7.67037 3.83039 6.90497 4.85267 6.49684 6.03147C6.0887 7.21027 6.05814 8.48697 6.40938 9.68394C6.76063 10.8809 7.47623 11.9387 8.45662 12.71C6.7767 13.383 5.31091 14.4994 4.21552 15.9399C3.12012 17.3805 2.43619 19.0913 2.23662 20.89C2.22218 21.0213 2.23374 21.1542 2.27065 21.2811C2.30756 21.4079 2.36909 21.5263 2.45173 21.6293C2.61864 21.8375 2.86141 21.9708 3.12662 22C3.39184 22.0292 3.65778 21.9518 3.86595 21.7849C4.07411 21.618 4.20745 21.3752 4.23662 21.11C4.45621 19.1552 5.38831 17.3498 6.85484 16.0388C8.32137 14.7278 10.2195 14.003 12.1866 14.003C14.1537 14.003 16.0519 14.7278 17.5184 16.0388C18.9849 17.3498 19.917 19.1552 20.1366 21.11C20.1638 21.3557 20.2811 21.5827 20.4657 21.747C20.6504 21.9114 20.8894 22.0015 21.1366 22H21.2466C21.5088 21.9698 21.7483 21.8373 21.9132 21.6313C22.078 21.4252 22.1547 21.1624 22.1266 20.9C21.9261 19.0962 21.2385 17.381 20.1375 15.9382C19.0364 14.4954 17.5635 13.3795 15.8766 12.71ZM12.1666 12C11.3755 12 10.6021 11.7654 9.94434 11.3259C9.28655 10.8864 8.77385 10.2616 8.4711 9.53074C8.16835 8.79983 8.08914 7.99557 8.24348 7.21964C8.39782 6.44372 8.77879 5.73099 9.3382 5.17158C9.89761 4.61217 10.6103 4.2312 11.3863 4.07686C12.1622 3.92252 12.9665 4.00173 13.6974 4.30448C14.4283 4.60724 15.053 5.11993 15.4925 5.77772C15.932 6.43552 16.1666 7.20888 16.1666 8C16.1666 9.06087 15.7452 10.0783 14.9951 10.8284C14.2449 11.5786 13.2275 12 12.1666 12Z" fill="white"/>
</svg>
</div>
</div>
<div class="flex flex-col gap-2 px-2 text-center">
<h4 class="text-2xl font-extrabold text-dark-grey-900 font-display">Provide Instant Solutions</h4>
<p class="font-medium text-grey-700">Deliver instant answers to your customers or team members with our shared team inboxes. Ensure quick responses and efficient problem-solving.</p>
</div>
</div>
<div class="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div>
<div class="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
<path d="M7.83331 4C7.83331 2.89 6.94331 2 5.83331 2C4.72331 2 3.83331 2.89 3.83331 4C3.83331 5.11 4.72331 6 5.83331 6C6.94331 6 7.83331 5.11 7.83331 4ZM11.0233 4.5C10.6133 4.5 10.2633 4.75 10.1033 5.13C9.66331 6.23 8.59331 7 7.33331 7H4.33331C3.50331 7 2.83331 7.67 2.83331 8.5V11H8.83331V8.74C10.2633 8.29 11.4133 7.21 11.9533 5.83C12.2133 5.19 11.7133 4.5 11.0233 4.5ZM19.8333 17C20.9433 17 21.8333 16.11 21.8333 15C21.8333 13.89 20.9433 13 19.8333 13C18.7233 13 17.8333 13.89 17.8333 15C17.8333 16.11 18.7233 17 19.8333 17ZM21.3333 18H18.3333C17.0733 18 16.0033 17.23 15.5633 16.13C15.4133 15.75 15.0533 15.5 14.6433 15.5C13.9533 15.5 13.4533 16.19 13.7033 16.83C14.2533 18.21 15.3933 19.29 16.8233 19.74V22H22.8233V19.5C22.8333 18.67 22.1633 18 21.3333 18ZM18.0833 11.09C18.0833 11.09 18.0833 11.08 18.0933 11.09C17.0333 11.36 16.1933 12.2 15.9233 13.26V13.25C15.8133 13.68 15.4133 14 14.9433 14C14.3933 14 13.9433 13.55 13.9433 13C13.9433 12.95 13.9633 12.86 13.9633 12.86C14.3933 11.01 15.8533 9.55 17.7133 9.13C17.7533 9.13 17.7933 9.12 17.8333 9.12C18.3833 9.12 18.8333 9.57 18.8333 10.12C18.8333 10.58 18.5133 10.98 18.0833 11.09ZM18.8333 6.06C18.8333 6.57 18.4633 6.98 17.9733 7.05C14.7833 7.44 12.2733 9.96 11.8833 13.15C11.8133 13.63 11.3933 14 10.8933 14C10.3433 14 9.89331 13.55 9.89331 13C9.89331 12.98 9.89331 12.96 9.89331 12.94C9.89331 12.93 9.89331 12.92 9.89331 12.91C10.3933 8.79 13.6833 5.53 17.8133 5.06H17.8233C18.3833 5.06 18.8333 5.51 18.8333 6.06Z" fill="white"/>
</svg>
</div>
</div>
<div class="flex flex-col gap-2 px-2 text-center">
<h4 class="text-2xl font-extrabold text-dark-grey-900 font-display">Enhance Customer Connections</h4>
<p class="font-medium text-grey-700">Connect with your customers seamlessly using our shared team inboxes. Improve customer interactions and build stronger relationships.</p>
</div>
</div>
<div class="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div>
<div class="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
<path d="M10.5 13H3.49998C3.23477 13 2.98041 13.1054 2.79288 13.2929C2.60534 13.4804 2.49998 13.7348 2.49998 14V21C2.49998 21.2652 2.60534 21.5196 2.79288 21.7071C2.98041 21.8946 3.23477 22 3.49998 22H10.5C10.7652 22 11.0196 21.8946 11.2071 21.7071C11.3946 21.5196 11.5 21.2652 11.5 21V14C11.5 13.7348 11.3946 13.4804 11.2071 13.2929C11.0196 13.1054 10.7652 13 10.5 13ZM9.49998 20H4.49998V15H9.49998V20ZM21.5 2H14.5C14.2348 2 13.9804 2.10536 13.7929 2.29289C13.6053 2.48043 13.5 2.73478 13.5 3V10C13.5 10.2652 13.6053 10.5196 13.7929 10.7071C13.9804 10.8946 14.2348 11 14.5 11H21.5C21.7652 11 22.0196 10.8946 22.2071 10.7071C22.3946 10.5196 22.5 10.2652 22.5 10V3C22.5 2.73478 22.3946 2.48043 22.2071 2.29289C22.0196 2.10536 21.7652 2 21.5 2ZM20.5 9H15.5V4H20.5V9ZM21.5 13H14.5C14.2348 13 13.9804 13.1054 13.7929 13.2929C13.6053 13.4804 13.5 13.7348 13.5 14V21C13.5 21.2652 13.6053 21.5196 13.7929 21.7071C13.9804 21.8946 14.2348 22 14.5 22H21.5C21.7652 22 22.0196 21.8946 22.2071 21.7071C22.3946 21.5196 22.5 21.2652 22.5 21V14C22.5 13.7348 22.3946 13.4804 22.2071 13.2929C22.0196 13.1054 21.7652 13 21.5 13ZM20.5 20H15.5V15H20.5V20ZM10.5 2H3.49998C3.23477 2 2.98041 2.10536 2.79288 2.29289C2.60534 2.48043 2.49998 2.73478 2.49998 3V10C2.49998 10.2652 2.60534 10.5196 2.79288 10.7071C2.98041 10.8946 3.23477 11 3.49998 11H10.5C10.7652 11 11.0196 10.8946 11.2071 10.7071C11.3946 10.5196 11.5 10.2652 11.5 10V3C11.5 2.73478 11.3946 2.48043 11.2071 2.29289C11.0196 2.10536 10.7652 2 10.5 2ZM9.49998 9H4.49998V4H9.49998V9Z" fill="white"/>
</svg>
</div>
</div>
<div class="flex flex-col gap-2 px-2 text-center">
<h4 class="text-2xl font-extrabold text-dark-grey-900 font-display">Seamless Web Integration</h4>
<p class="font-medium text-grey-700">Integrate our shared team inboxes seamlessly with your website. Enhance the user experience and provide efficient communication channels. </p>
</div>
</div>
<div class="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div>
<div class="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
<path d="M10.1666 14C9.90141 14 9.64706 14.1054 9.45952 14.2929C9.27198 14.4804 9.16663 14.7348 9.16663 15V21C9.16663 21.2652 9.27198 21.5196 9.45952 21.7071C9.64706 21.8946 9.90141 22 10.1666 22C10.4318 22 10.6862 21.8946 10.8737 21.7071C11.0613 21.5196 11.1666 21.2652 11.1666 21V15C11.1666 14.7348 11.0613 14.4804 10.8737 14.2929C10.6862 14.1054 10.4318 14 10.1666 14ZM5.16663 18C4.90141 18 4.64706 18.1054 4.45952 18.2929C4.27198 18.4804 4.16663 18.7348 4.16663 19V21C4.16663 21.2652 4.27198 21.5196 4.45952 21.7071C4.64706 21.8946 4.90141 22 5.16663 22C5.43184 22 5.6862 21.8946 5.87373 21.7071C6.06127 21.5196 6.16663 21.2652 6.16663 21V19C6.16663 18.7348 6.06127 18.4804 5.87373 18.2929C5.6862 18.1054 5.43184 18 5.16663 18ZM20.1666 2C19.9014 2 19.6471 2.10536 19.4595 2.29289C19.272 2.48043 19.1666 2.73478 19.1666 3V21C19.1666 21.2652 19.272 21.5196 19.4595 21.7071C19.6471 21.8946 19.9014 22 20.1666 22C20.4318 22 20.6862 21.8946 20.8737 21.7071C21.0613 21.5196 21.1666 21.2652 21.1666 21V3C21.1666 2.73478 21.0613 2.48043 20.8737 2.29289C20.6862 2.10536 20.4318 2 20.1666 2ZM15.1666 9C14.9014 9 14.6471 9.10536 14.4595 9.29289C14.272 9.48043 14.1666 9.73478 14.1666 10V21C14.1666 21.2652 14.272 21.5196 14.4595 21.7071C14.6471 21.8946 14.9014 22 15.1666 22C15.4318 22 15.6862 21.8946 15.8737 21.7071C16.0613 21.5196 16.1666 21.2652 16.1666 21V10C16.1666 9.73478 16.0613 9.48043 15.8737 9.29289C15.6862 9.10536 15.4318 9 15.1666 9Z" fill="white"/>
</svg>
</div>
</div>
<div class="flex flex-col gap-2 px-2 text-center">
<h4 class="text-2xl font-extrabold text-dark-grey-900 font-display">Effortless Team Management</h4>
<p class="font-medium text-grey-700">Manage your team effortlessly with our shared team inboxes. Simplify team reporting and ensure smooth operations. </p>
</div>
</div>
</div>
</div>
</div>Team Section With Images
Component from
Motion Landing Library
Builder
<div class="w-full draggable">
<div class="container flex flex-col mx-auto my-20 gap-14">
<div class="w-full text-center md:text-start">
<h2 class="mb-6 text-4xl font-extrabold leading-tight md:text-5xl text-dark-grey-900 font-display">Meet the Exceptional Team</h2>
<p class="text-lg font-normal md:w-7/12 text-dark-grey-500">
Our dedicated professionals bring unparalleled expertise and commitment to every endeavor. We believe in the art of innovation, and our passion propels us forward. Experience the excellence that sets us apart.
</p>
</div>
<div class="grid w-full grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
<div class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-1.jpeg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">Olivia Baker</h3>
<p class="text-lg font-bold text-purple-blue-500">Director of Finance</p>
</div>
<div>
<p class="text-base font-medium leading-8 text-dark-grey-500">Olivia is our financial wizard, meticulously managing our finances, investments, and budgets.</p>
</div>
</div>
<div class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-2.jpeg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">Andrew Foster</h3>
<p class="text-lg font-bold text-purple-blue-500">Senior Product Manager</p>
</div>
<div>
<p class="text-base font-medium leading-8 text-dark-grey-500">Andrew oversees our product development, turning ideas into market-ready solutions.</p>
</div>
</div>
<div class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-3.jpeg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">Jessica Lee</h3>
<p class="text-lg font-bold text-purple-blue-500">Customer Relations Manager</p>
</div>
<div>
<p class="text-base font-medium leading-8 text-dark-grey-500">Jessica is our customer champion, ensuring every client interaction is a positive one.</p>
</div>
</div>
<div class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-4.jpeg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">Richard Ward</h3>
<p class="text-lg font-bold text-purple-blue-500">Creative Design Lead</p>
</div>
<div>
<p class="text-base font-medium leading-8 text-dark-grey-500">Richard is our creative genius, transforming ideas into captivating visuals.</p>
</div>
</div>
<div class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-6.jpg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">Michael Chang</h3>
<p class="text-lg font-bold text-purple-blue-500">Head of Operations</p>
</div>
<div>
<p class="text-base font-medium leading-8 text-dark-grey-500">Michael is the mastermind behind our efficient operations. He ensures our processes run like a well-oiled machine.</p>
</div>
</div>
<div class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-9.jpg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">Sarah Mitchell</h3>
<p class="text-lg font-bold text-purple-blue-500">Chief Marketing Officer (CMO)</p>
</div>
<div>
<p class="text-base font-medium leading-8 text-dark-grey-500">Sarah is the creative force behind our brand. Her marketing prowess and strategic thinking drive business growth.</p>
</div>
</div>
<div class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-14.jpg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">David Rodriguez</h3>
<p class="text-lg font-bold text-purple-blue-500">Chief Technology Officer (CTO)</p>
</div>
<div>
<p class="text-base font-medium leading-8 text-dark-grey-500">David is our tech guru, spearheading innovation and ensuring our products are cutting-edge. </p>
</div>
</div>
<div class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-11.jpg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">Emily Clarke</h3>
<p class="text-lg font-bold text-purple-blue-500">Chief Executive Officer (CEO)</p>
</div>
<div>
<p class="text-base font-medium leading-8 text-dark-grey-500">Emily leads our company with a visionary zeal, setting the strategic direction and inspiring our team to achieve greatness.</p>
</div>
</div>
</div>
</div>
</div>Simple Authentication Card
Component from
Motion Landing Library
Builder
<div class="flex justify-center w-full h-full my-auto xl:gap-14 lg:justify-normal md:gap-5 draggable">
<div class="flex items-center justify-center w-full lg:p-12">
<div class="flex items-center xl:p-10">
<form class="flex flex-col w-full h-full pb-6 text-center bg-white rounded-3xl">
<h3 class="mb-3 text-4xl font-extrabold text-dark-grey-900 font-display">Sign In</h3>
<p class="mb-4 text-grey-700">Enter your email and password</p>
<a class="flex items-center justify-center w-full py-4 mb-6 text-sm font-medium transition duration-300 rounded-2xl text-grey-900 bg-grey-300 hover:bg-grey-400 focus:ring-4 focus:ring-grey-300">
<img class="h-5 mr-2" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/logos/logo-google.png" alt="">
<span>Sign in with Google</span>
</a>
<div class="flex items-center mb-3">
<hr class="h-0 border-b border-solid border-grey-500 grow">
<p class="mx-4 text-grey-600">or</p>
<hr class="h-0 border-b border-solid border-grey-500 grow">
</div>
<label for="email" class="mb-2 text-sm text-start text-grey-900">Email*</label>
<input id="email" type="email" placeholder="[email protected]" class="flex items-center w-full px-5 py-4 mr-2 text-sm font-medium outline-none focus:bg-grey-400 mb-7 placeholder:text-grey-700 bg-grey-200 text-dark-grey-900 rounded-2xl"/>
<label for="password" class="mb-2 text-sm text-start text-grey-900">Password*</label>
<input id="password" type="password" placeholder="Enter a password" class="flex items-center w-full px-5 py-4 mb-5 mr-2 text-sm font-medium outline-none focus:bg-grey-400 placeholder:text-grey-700 bg-grey-200 text-dark-grey-900 rounded-2xl"/>
<div class="flex flex-row justify-between mb-8">
<label class="relative inline-flex items-center mr-3 cursor-pointer select-none">
<input type="checkbox" checked value="" class="sr-only peer">
<div
class="w-5 h-5 bg-white border-2 rounded-sm border-grey-500 peer peer-checked:border-0 peer-checked:bg-purple-blue-500">
<img class="" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/icons/check.png" alt="tick">
</div>
<span class="ml-3 text-sm font-normal text-grey-900">Keep me logged in</span>
</label>
<a href="javascript:void(0)" class="mr-4 text-sm font-medium text-purple-blue-500">Forget password?</a>
</div>
<button class="w-full px-6 py-5 mb-5 text-sm font-bold leading-none text-white transition duration-300 md:w-96 rounded-2xl hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 bg-purple-blue-500">Sign In</button>
<p class="text-sm leading-relaxed text-grey-900">Not registered yet? <a href="javascript:void(0)" class="font-bold text-grey-700">Create an Account</a></p>
</form>
</div>
</div>
</div>Header With Navbar And Image
Component from
Motion Landing Library
Builder
<div class="container flex flex-col mx-auto draggable">
<div class="relative flex flex-wrap items-center justify-between w-full bg-white group py-7 shrink-0">
<div>
<img class="h-8" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/logos/logo-nav-0.png"></img>
</div>
<div class="items-center justify-between hidden gap-12 text-black md:flex">
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Product</a>
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Features</a>
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Pricing</a>
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Company</a>
</div>
<div class="items-center hidden gap-8 md:flex">
<button class="flex items-center text-sm font-normal text-gray-800 hover:text-gray-900 transition duration-300">Log In</button>
<button class="flex items-center px-4 py-2 text-sm font-bold rounded-xl bg-purple-blue-100 text-purple-blue-600 hover:bg-purple-blue-600 hover:text-white transition duration-300">
Sign Up
</button>
</div>
<button onclick="(() => { this.closest('.group').classList.toggle('open')})()" class="flex md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3 8H21C21.2652 8 21.5196 7.89464 21.7071 7.70711C21.8946 7.51957 22 7.26522 22 7C22 6.73478 21.8946 6.48043 21.7071 6.29289C21.5196 6.10536 21.2652 6 21 6H3C2.73478 6 2.48043 6.10536 2.29289 6.29289C2.10536 6.48043 2 6.73478 2 7C2 7.26522 2.10536 7.51957 2.29289 7.70711C2.48043 7.89464 2.73478 8 3 8ZM21 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 11H3C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11Z" fill="black"/>
</svg>
</button>
<div class="absolute flex md:hidden transition-all duration-300 ease-in-out flex-col items-start shadow-main justify-center w-full gap-3 overflow-hidden bg-white max-h-0 group-[.open]:py-4 px-4 rounded-2xl group-[.open]:max-h-64 top-full">
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Product</a>
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Features</a>
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Pricing</a>
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Company</a>
<button class="flex items-center text-sm font-normal text-black">Log In</button>
<button class="flex items-center px-4 py-2 text-sm font-bold rounded-xl bg-purple-blue-100 text-purple-blue-600 hover:bg-purple-blue-600 hover:text-white transition duration-300">Sign Up</button>
</div>
</div>
<div class="grid w-full grid-cols-1 my-auto mt-12 mb-8 md:grid-cols-2 xl:gap-14 md:gap-5">
<div class="flex flex-col justify-center col-span-1 text-center lg:text-start">
<div class="flex items-center justify-center mb-4 lg:justify-normal">
<img class="h-5" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/logos/logo-1.png" alt="logo">
<h4 class="ml-2 text-sm font-bold tracking-widest text-primary uppercase">Explore the Latest Tailwind Template</h4>
</div>
<h1 class="mb-8 text-4xl font-extrabold leading-tight lg:text-6xl text-dark-grey-900 font-display">Elevate your website with Motion</h1>
<p class="mb-6 text-base font-normal leading-7 lg:w-3/4 text-grey-900">
Say goodbye to endless hours spent on building templates from scratch. Experience the quickest, most responsive, and trendiest dashboard solution available. Seriously.
</p>
<div class="flex flex-col items-center gap-4 lg:flex-row">
<button class="flex items-center py-4 text-sm font-bold text-white px-7 bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300 rounded-xl">Get started now</button>
<button class="flex items-center py-4 text-sm font-medium px-7 text-dark-grey-700 hover:text-dark-grey-900 transition duration-300 rounded-2xl">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-2">
<path fill-rule="evenodd" d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z" clip-rule="evenodd" />
</svg>
Book a free call
</button>
</div>
</div>
<div class="items-center justify-end hidden col-span-1 md:flex">
<img class="w-4/5 rounded-md" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/header-1.png" alt="header image">
</div>
</div>
</div>Contact Us With Informations And Send Message Contact Form
Pricing Section With Switch Button
Http Code With Title Subtitle Text And Button
Logo Area With Title And Logos
Requires JavaScript
