A Pen by Allen Goodreds on CodePen.
Created
April 26, 2023 05:45
-
-
Save goodreds/40ac3bd329d737e280d0e1346f3e81ca to your computer and use it in GitHub Desktop.
TW: Overlapping elements
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="flex flex-col justify-center items-center max-w-sm mx-auto my-8"> | |
| <div style="background-image: url(https://images.unsplash.com/photo-1539185441755-769473a23570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80" | |
| class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center"></div> | |
| <div class="w-56 md:w-64 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden"> | |
| <div class="py-2 text-center font-bold uppercase tracking-wide text-gray-800">Nike Revolt</div> | |
| <div class="flex items-center justify-between py-2 px-3 bg-gray-400"> | |
| <h1 class="text-gray-800 font-bold ">$129</h1> | |
| <button class=" bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700">Add to cart</button> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment