A simple angled card using Tailwind CSS.
Photos provided by Unsplash
Download the Sketch File
Edit it in CodePen
-
-
Save Bitti09/6c6f74cbe80a3ff2d8a2164f23e903d6 to your computer and use it in GitHub Desktop.
Tailwind CSS Angled Card
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
| .card-header { | |
| height: 18rem; | |
| background-image: url('https://images.unsplash.com/photo-1516562309708-05f3b2b2c238?ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80'); | |
| background-position-y: 50%; | |
| } | |
| .card-header:after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 0; | |
| left: -10%; | |
| height: 50px; | |
| width: 120%; | |
| background: #ffffff; | |
| transform: translateY(50%) rotate(5deg); | |
| } |
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="sm:w-2/3 md:w-1/3 mx-auto rounded-lg shadow-md overflow-hidden relative"> | |
| <div class="card-header relative bg-cover z-0"> | |
| <div class="absolute pin-b pin-r mr-3 mb-8 z-10 bg-orange text-white px-3 py-1 text-xs uppercase antialiased rounded-full tracking-wide">Intermediate</div> | |
| <div class="absolute pin-t pin-l ml-3 mt-3 flex items-center"> | |
| <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80" class="w-8 h-8 rounded-full shadow mr-2" /> | |
| <div class="text-xs text-white uppercase tracking-wide antialiased">John Doe</div> | |
| </div> | |
| </div> | |
| <div class="relative p-6 -mt-4"> | |
| <h2 class="mb-1 text-xl text-grey-darker font-normal">Custom Side Tables</h2> | |
| <div class="mb-6 text-xs tracking-wide uppercase text-grey">18 Lessons - 2:34 hrs total</div> | |
| <p class="text-grey-dark tracking-normal leading-normal mb-6"> | |
| Occupy McSweeney's roof party biodiesel letterpress asymmetrical. Sustainable brunch pug, put a bird on it tilde lumber sexual gluten-free banh mi chambray mumblecore pickled. Yr retro hashtag, pork belly drinking vinegar Blue Bottle disrupt butcher. Health goth small batch… | |
| </p> | |
| <div class="w-full p-4 rounded bg-green hover:bg-green-light uppercase tracking-wide text-white text-center text-md antialiased cursor-pointer"> | |
| Start Project | |
| </div> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment