JSFiddle - React, Tailwind, and code Playground

by Saksham Malhotra

HTML

<div class="card">
  <div class="icon"></div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae quia a iusto vero quibusdam aspernatur impedit odit. Minima magnam quis obcaecati, ex dolores molestias quo, debitis? Quibusdam obcaecati odit natus!
  </div>
</div>

SCSS

@mixin center($width) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: $width;
  box-sizing: border-box;
}

.card {
  @include center(50%);
  filter:blur(15px) contrast(20);
  .content {
    background-color: black;
    padding: 30px;
  }
  .icon {
    top: -30px;
    position: absolute;
    left: -30px;
    height: 50px;
    width: 50px;
    background-color: black;
    border-radius:50%;
    animation:diagonal 3s infinite;
  }
}
@keyframes diagonal {
  0%{
    top:-30px;
    left:-30px;
  }
  50%{
    top:-40px;
    left:-40px;
  }
  100%{
    top:-30px;
    left:-30px;
  }
}