<section class="relative bg-gray-800 py-20 2xl:py-40 overflow-hidden">
<div class="relative max-w-4xl px-4 lg:px-0 mx-auto py-10">
<div class="max-w-xl mb-14 lg:mb-28">
<span class="text-lg text-blue-400 font-semibold">Our Works</span>
<h2 class="mt-8 text-5xl text-white font-bold font-heading">More than 20 years in the game</h2>
</div>
<div class="relative">
<div class="hidden lg:block absolute top-0 left-0 -ml-80">
<img class="-ml-24 w-112 h-96 object-cover" src="https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" alt="">
</div>
<div class="hidden lg:block absolute top-0 right-0 -mr-80">
<img class="-mr-52 w-112 h-96 object-cover" src="https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" alt="">
</div>
<div class="relative max-w-4xl mx-auto">
<img class="w-full h-96 mb-12 object-cover" src="https://images.unsplash.com/photo-1617791160505-6f00504e3519?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1100&q=80" alt="">
<div class="flex flex-wrap -mx-5">
<div class="w-full lg:w-4/5 px-5 mb-6 lg:mb-0">
<div class="relative py-12 px-10 lg:px-20 bg-gray-600 rounded-xl">
<div class="absolute top-0 -mt-6 left-0 ml-16 w-14 h-14 bg-gray-600" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
<h3 class="mb-6 text-4xl text-white font-bold font-heading">Experience design for your products</h3>
<p class="text-lg text-gray-300">The brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="w-auto mx-auto lg:w-1/5 px-5">
<button class="inline-flex mr-2 items-center justify-center w-14 h-14 bg-blue-500 hover:bg-blue-600 rounded-full">
<svg class="w-4 h-4" width="7" height="13" viewbox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.84708 12.1077C7.05097 12.3133 7.05097 12.6436 6.84708 12.8476C6.64319 13.0517 6.31377 13.0525 6.10988 12.8476L0.152917 6.8708C-0.0509739 6.66673 -0.0509738 6.33645 0.152917 6.13087L6.10988 0.154027C6.31377 -0.0500387 6.64319 -0.0500386 6.84708 0.154027C7.05098 0.358848 7.05098 0.689887 6.84708 0.893952L1.4143 6.50121L6.84708 12.1077Z" fill="white"></path>
</svg>
</button>
<button class="inline-flex items-center justify-center w-14 h-14 bg-blue-500 hover:bg-blue-600 rounded-full">
<svg class="w-4 h-4" width="7" height="13" viewbox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.152917 0.894235C-0.0509742 0.688658 -0.0509742 0.358375 0.152917 0.15431C0.356808 -0.0497557 0.686228 -0.0505119 0.89012 0.15431L6.84708 6.13116C7.05097 6.33522 7.05097 6.6655 6.84708 6.87108L0.890119 12.8479C0.686227 13.052 0.356807 13.052 0.152916 12.8479C-0.0509753 12.6431 -0.0509753 12.3121 0.152916 12.108L5.5857 6.50074L0.152917 0.894235Z" fill="white"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</section>Framework
All Frameworks
UI Library
All Libraries
Components
- Alert 85
- Application 122
- Banner 20
- Blog 159
- Call to action 263
- Contact 97
- Content 14
- Content 128
- Cookies 105
- E-commerce (orders) 28
- E-commerce (products) 48
- FAQ 108
- Features 324
- Footer 125
- Footers 10
- Graphs 18
- HTTP codes 99
- Headers 226
- How it works 135
- Logo clouds 184
- Modals 9
- Navbar 68
- Navigation (horizontal) 238
- Navigation (vertical) 10
- Newsletter 113
- Portfolio 126
- Pricing 118
- Projects 9
- Reviews 10
- Sign in / Sign up 174
- Stats 107
- Ta general tables 7
- Tables 52
- Team 103
- Testimonials 130
- Users 25
Portfolio Components by Shuffle
Choose from 126 variations of Portfolio UI components. Presented here are variants available in various UI libraries.
Get access to all alert UI components, code and our visual editor. Try the demo for free!
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
