JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<article class="card-content">
  <a href="">
    <div class="card-content--image-wrapper">
      <div class="card-content--inner-image-wrapper" style="background-image: url('https://source.unsplash.com/random')"></div>
    </div>
  </a>
</article>

CSS

.card-content > a {
  overflow: hidden;
  box-sizing: border-box;
  text-decoration: none;
}

.card-content > a:hover .card-content--main-content-wrapper {
  border-color: red;
  border-width: 2px;
  overflow: hidden;
}

.card-content > a:hover .card-content--inner-image-wrapper {
  overflow: hidden;
}

.card-content > a:hover .card-content--inner-main-content-wrapper {
  margin-left: -2px;
  margin-right: -2px;
  margin-bottom: -1px;
  margin-top: 1px;
  overflow: hidden;
}

.card-content > a:hover .card-content--image-wrapper {
  border-right: 2px solid red;
  border-left: 2px solid red;
  border-top: 2px solid red;
  overflow: hidden;
}

.card-content > a .card-content--image-wrapper {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}


  .card-content--image-wrapper
  .card-content--inner-image-wrapper {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 56%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.card-content > a .card-content--main-content-wrapper {
  border-right: 0.5px solid $c-gray-dark;
  border-left: 0.5px solid $c-gray-dark;
  border-bottom: 0.5px solid $c-gray-dark;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  padding: 0 25px;
}

.card-content > a .card-content--main-content-wrapper::after {
  content: "";
  display: block;
  height: 20px;
}

.card-content > a .card-content--inner-main-content-wrapper {
  min-height: 180px;

  @include bp(sm) {
    min-height: 315px;
  }

  @include bp(sm-md) {
    min-height: 230px;
  }

  @include bp(md) {
    min-height: 210px;
  }

  @include bp(lg) {
    min-height: 180px;
  }
}

.card-content > a .card-content--read-time-wrapper {
  font-size: $font-size-sm;
  font-weight: $font-weight-bold;
  letter-spacing: 2.1px;
  color: $c-teal;
  padding: $l-margin 0;
  text-transform: uppercase;
}

.card-content > a header h2 {
  font-size: $font-size-md;
  font-weight:...