Tailwind CSS Angled Card

readme.md

Tailwind CSS Card

A simple angled card using Tailwind CSS.

Photos provided by Unsplash

• https://unsplash.com/photos/ZHvM3XIOHoE
• https://unsplash.com/photos/oJ7SV6vQfBA

Download the Sketch File

Edit it in CodePen

styles.css

.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);
}

tailwind-card.html

<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>

tailwind-card.png