<div class="fixed top-0 left-0 w-full h-full px-4 py-16 md:py-40 bg-coolGray-900 bg-opacity-50 overflow-y-auto z-50">
<div class="max-w-3xl mx-auto bg-coolGray-50 rounded-lg overflow-hidden">
<div class="relative">
<img class="h-40 md:h-auto w-full object-cover" src="flex-ui-assets/images/modals/photo-modal1.png" alt="">
<div class="absolute bottom-0 left-1/2 mb-6 transform -translate-x-1/2"><a class="inline-block w-3 h-3 mr-3 bg-coolGray-100 rounded-full" href="#"></a><a class="inline-block w-3 h-3 mr-3 bg-green-500 rounded-full" href="#"></a><a class="inline-block w-3 h-3 bg-coolGray-100 rounded-full" href="#"></a></div>
<a class="absolute top-0 md:top-auto md:bottom-0 right-0 inline-block py-2 px-4 mt-6 mr-6 mb-6 text-sm text-green-50 font-medium leading-5 bg-yellow-500 hover:bg-yellow-600 focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50 rounded-md" href="#">For free</a>
</div>
<div class="flex flex-wrap">
<div class="w-full md:w-4/6 border-b md:border-b-0 md:border-r border-coolGray-100">
<div class="py-10 pl-10 pr-8">
<h3 class="mb-2 text-xl font-semibold text-coolGray-800 leading-7">Milk and honey</h3>
<p class="mb-4 text-sm text-coolGray-500 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa.</p>
<a class="inline-flex items-center text-green-500 hover:text-green-600 font-medium" href="#">
<span class="mr-2">Learn More</span>
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.71 10.71C13.801 10.6149 13.8724 10.5028 13.92 10.38C14.02 10.1365 14.02 9.86346 13.92 9.62C13.8724 9.49725 13.801 9.3851 13.71 9.29L10.71 6.29C10.5217 6.1017 10.2663 5.99591 10 5.99591C9.7337 5.99591 9.47831 6.1017 9.29 6.29C9.1017 6.4783 8.99591 6.7337 8.99591 7C8.99591 7.2663 9.1017 7.5217 9.29 7.71L10.59 9L7 9C6.73479 9 6.48043 9.10536 6.2929 9.29289C6.10536 9.48043 6 9.73478 6 10C6 10.2652 6.10536 10.5196 6.2929 10.7071C6.48043 10.8946 6.73479 11 7 11L10.59 11L9.29 12.29C9.19628 12.383 9.12188 12.4936 9.07111 12.6154C9.02034 12.7373 8.99421 12.868 8.99421 13C8.99421 13.132 9.02034 13.2627 9.07111 13.3846C9.12188 13.5064 9.19628 13.617 9.29 13.71C9.38297 13.8037 9.49357 13.8781 9.61543 13.9289C9.73729 13.9797 9.86799 14.0058 10 14.0058C10.132 14.0058 10.2627 13.9797 10.3846 13.9289C10.5064 13.8781 10.617 13.8037 10.71 13.71L13.71 10.71ZM20 10C20 8.02219 19.4135 6.08879 18.3147 4.4443C17.2159 2.79981 15.6541 1.51808 13.8268 0.761204C11.9996 0.00432792 9.98891 -0.193706 8.0491 0.192146C6.10929 0.577999 4.32746 1.53041 2.92894 2.92893C1.53041 4.32746 0.578004 6.10929 0.192152 8.0491C-0.1937 9.98891 0.00433294 11.9996 0.761209 13.8268C1.51809 15.6541 2.79981 17.2159 4.4443 18.3147C6.08879 19.4135 8.02219 20 10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C17.9997 16.1425 18.7363 15.0401 19.2388 13.8268C19.7413 12.6136 20 11.3132 20 10ZM2 10C2 8.41775 2.4692 6.87103 3.34825 5.55544C4.2273 4.23985 5.47673 3.21446 6.93854 2.60896C8.40035 2.00346 10.0089 1.84504 11.5607 2.15372C13.1126 2.4624 14.538 3.22433 15.6569 4.34315C16.7757 5.46197 17.5376 6.88743 17.8463 8.43928C18.155 9.99113 17.9965 11.5997 17.391 13.0615C16.7855 14.5233 15.7602 15.7727 14.4446 16.6518C13.129 17.5308 11.5823 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84286 14.1566 2 12.1217 2 10Z" fill="currentColor"></path>
</svg>
</a>
</div>
</div>
<div class="w-full md:w-2/6 pt-6 pb-10 px-8">
<div>
<div class="mb-10">
<div class="flex mb-3 items-center justify-between">
<span class="text-sm font-medium text-coolGray-500">Size</span>
<span class="text-sm font-medium text-coolGray-900">2.5 MB</span>
</div>
<div class="flex mb-3 items-center justify-between">
<span class="text-sm font-medium text-coolGray-500">Lenght</span>
<span class="text-sm font-medium text-coolGray-900">88 Pages</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-coolGray-500">Last Update</span>
<span class="text-sm font-medium text-coolGray-900">12 Days ago</span>
</div>
</div>
<a class="inline-block py-3 px-7 w-full text-base text-green-50 font-medium text-center leading-6 bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Download PDF</a>
</div>
</div>
</div>
</div>
</div>Framework
All Frameworks
UI Library
All Libraries
Components
- Alert 245
- Application 161
- Applications 5
- Banner 45
- Blog 209
- Call to action 318
- Careers 20
- Contact 130
- Contacts 5
- Content 172
- Cookies 153
- E-commerce (orders) 56
- E-commerce (products) 93
- FAQ 136
- Features 402
- Footers 186
- Graphs 46
- HTTP codes 153
- Headers 276
- How it works 171
- Logo clouds 246
- Modals 15
- Navbar 140
- Navigation (horizontal) 302
- Navigation (vertical) 14
- Navigations 4
- Newsletter 163
- Portfolio 147
- Pricing 160
- Projects 9
- Reviews 20
- Rich text 3
- Sign in / Sign up 236
- Stats 219
- Tables 5
- Tables 132
- Team 147
- Testimonials 179
- Users 59
Component #1
Modals Components by Shuffle
Choose from 15 variations of Modals UI components. Presented here are variants available in various UI libraries.
Get access to all UI components, code, and our visual editor. Try the demo for free!
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
