JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="card">
  <img src="https://picsum.photos/400/225" />

  <div class="content">
    <a href="">Inspirational stuff</a>

    <footer></footer>
  </div>
</div>

CSS

:root {
  background-color: #EEE;
  font-family: Arial;
  padding: 5rem;
}

.card {
  --radius: 1rem;
  border-radius: var(--radius);
  overflow: clip;
  width: 400px;
  position: relative;
  background-color: #EEE;
  box-shadow: 0 0.5rem 1rem #0002, 0 0.5rem 5rem #0384;

  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
  }

  &::before {
    --inset: 0px;
    inset: var(--inset);
    border-radius: calc(var(--radius) - var(--inset));
    box-shadow: inset 0 1px #FFF8, inset 0 1.5rem 1rem -0.5rem #FFF4/*, inset 0 -10px 10px #FFF4*/;
    z-index: 4;
    _filter: blur(1px);
  }

  &::after {
    border-radius: inherit;
    box-shadow: inset 0 -0.5rem 1rem#0381,  inset 0 0 1px 1px #0001;
    z-index: 3;
  }

  .content {
    padding: 2rem;
  } 

  a {
    font-weight: 600;
    font-size: 1.5rem;
    color: #334;
    text-decoration: none;  

    &::after {
      content: "";
      display: block;
      position: absolute;
      inset: 0;
    }
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
    filter: brightness(0.99);
  }
}