<section class="relative pb-20 lg:pb-40 lg:pt-20 2xl:py-40 bg-gray-800 overflow-hidden">
<img class="hidden lg:block absolute bottom-0 left-0 w-40 h-48 object-cover" src="https://images.pexels.com/photos/7193529/pexels-photo-7193529.jpeg?q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=650&w=450" alt="">
<div class="relative w-full lg:w-1/2 lg:ml-auto mb-20 lg:mb-0">
<img class="hidden lg:block lg:absolute right-0 top-0 w-full h-128 object-cover" src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80" alt="">
<img class="lg:hidden w-full h-96 object-cover" src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="">
</div>
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-1/2 px-4">
<div class="max-w-lg">
<h2 class="mb-12 lg:mb-20 text-5xl lg:text-7xl lg:text-center font-bold font-heading text-white">We're Zospace - Founded in London</h2>
<div class="flex items-center mb-8 pb-14 border-b border-gray-500">
<img class="mr-14" src="zospace-assets/images/light-bulb-purple.svg" alt="">
<div class="max-w-sm">
<p class="text-lg text-gray-200">A short message that will bring your customers into the world of your imagination.</p>
</div>
</div>
<a class="flex items-center justify-end font-bold text-gray-200" href="#">
<span>Learn our story</span>
<span class="ml-5">
<svg width="19" height="20" viewbox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.7387 1.47293L18.7387 10.93L17.5565 10.93L17.5565 2.89739L0.835337 19.6245L0.00193592 18.7911L16.7231 2.064L9.28164 2.064L9.28164 0.881867L18.1476 0.881866C18.4741 0.881866 18.7387 1.14648 18.7387 1.47293Z" fill="white"></path>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Alert 101
- Application 108
- Banners 73
- Benefits 16
- Blog 132
- Breadcrumbs 24
- Call to action 199
- Cards 29
- Careers 32
- Confirmation 6
- Contact 106
- Content 85
- Cookies 97
- Dashboards 13
- Download 5
- E-commerce (orders) 35
- E-commerce (products) 76
- FAQ 95
- Features 227
- Footers 145
- Forms 9
- Graphs 38
- HTTP codes 107
- Hero section 164
- How it works 129
- Instagram photos 5
- Integrations 5
- Logo clouds 179
- Modals 29
- Navbar 209
- Navigation (horizontal) 215
- Navigation (vertical) 7
- Newsletter 129
- Notifications 7
- Paginations 12
- Portfolio 93
- Pricing 128
- Product info 5
- Projects 6
- Reviews 32
- Rich text 3
- Sign in / Sign up 181
- Snackbars 10
- Stats 153
- Tables 75
- Team 117
- Testimonials 144
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
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.
