<section class="pt-40 bg-white">
<div class="md:ml-10 bg-gray-900 relative">
<img class="hidden 2xl:block max-w-xs 3xl:max-w-sm absolute top-0 left-0 z-10" src="wrexa-assets/images/work-office.png" alt="">
<img class="hidden md:block absolute top-1/2 right-0" src="wrexa-assets/images/women-photo2.png" alt="">
<div class="container px-4 mx-auto relative">
<div class="hidden sm:block absolute top-0 left-0 bottom-0 h-full ml-12 lg:ml-40 xl:ml-64 3xl:ml-80 w-px bg-gray-600"></div>
<img class="max-w-xs absolute top-0 right-0 -mt-40 mr-8" src="wrexa-assets/images/women-photo1.png" alt="">
<div>
<div class="sm:pb-40 pt-64 md:pt-52 max-w-md mx-auto">
<h1 class="font-heading text-5xl sm:text-6xl text-white mb-10">What you need, when you need it</h1>
<p class="font-light text-gray-500 mb-16">The pond cras ornare, some chords for a three moments, like a sense of truth that comes from within.</p>
<div class="pl-8 xl:pl-16 mb-24">
<div class="flex items-center mb-4">
<svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
<span class="ml-8 text-white">One platform for you</span>
</div>
<div class="flex items-center mb-4">
<svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
<span class="ml-8 text-white">Integrations</span>
</div>
<div class="flex items-center">
<svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
<span class="ml-8 text-white">Workflow builder</span>
</div>
</div>
<a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Discover Now</a>
</div>
<img class="block mx-auto mt-24 mb-6 2xl:hidden" src="wrexa-assets/images/work-office.png" alt="">
<img class="block md:hidden ml-auto" src="wrexa-assets/images/women-photo2.png" alt="">
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Alert 101
- Application 103
- Banners 37
- Blog 122
- Call to action 189
- Cards 29
- Careers 28
- Contact 96
- Content 80
- Cookies 92
- Dashboards 13
- E-commerce (orders) 28
- E-commerce (products) 49
- FAQ 86
- Features 215
- Footers 123
- Forms 9
- Graphs 38
- HTTP codes 98
- Hero section 144
- How it works 121
- Logo clouds 150
- Modals 29
- Navbar 209
- Navigation (horizontal) 202
- Navigation (vertical) 7
- Newsletter 104
- Notifications 7
- Paginations 12
- Portfolio 87
- Pricing 119
- Projects 6
- Reviews 10
- Rich text 3
- Sign in / Sign up 155
- Snackbars 10
- Stats 144
- Tables 70
- Team 108
- Testimonials 139
- Users 17
Component #1
Content makes the page. In our Tailwind content components, we provide you with many possible variations of content presentation. Regardless of its type and length, you'll find a way to show what's important to your audience.
Browse the Tailwind navigation component variants available in our editor. Under each of them is clear code that you can easily edit. Components are sorted by UI libraries, which consist of many other elements in the same style. Each of these libraries was created by our talented designers to allow you to create diverse and pretty pages.
See all variations of Tailwind navigation components and the code underneath them in Shuffle Editor.
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
