Tailwind Components - Motion Landing Library
Discover 101 Tailwind components available in Motion Landing Library
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
