JSFiddle - React, Tailwind, and code Playground

by Eduard Dyckman

HTML

<div class="container">
<div class="grad">

</div>
<svg width="363" height="366" viewBox="0 0 363 366" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 16C10 12.2288 10 10.3431 11.1716 9.17157C12.3431 8 14.2288 8 18 8H345C348.771 8 350.657 8 351.828 9.17157C353 10.3431 353 12.2288 353 16V346C353 349.771 353 351.657 351.828 352.828C350.657 354 348.771 354 345 354H18C14.2288 354 12.3431 354 11.1716 352.828C10 351.657 10 349.771 10 346L10 16Z" fill="white"/>
</g>
<path d="M27.386 43V30.094H29.564V39.904L36.098 30.094H38.366V43H36.152V33.226L29.654 43H27.386ZM45.2005 43.18C44.4445 43.18 43.7665 43.072 43.1665 42.856C42.5665 42.628 42.0565 42.31 41.6365 41.902C41.2165 41.482 40.8925 40.972 40.6645 40.372C40.4365 39.772 40.3225 39.088 40.3225 38.32C40.3225 37.564 40.4365 36.886 40.6645 36.286C40.8925 35.686 41.2165 35.182 41.6365 34.774C42.0565 34.354 42.5725 34.036 43.1845 33.82C43.7965 33.592 44.4805 33.478 45.2365 33.478C45.8845 33.478 46.4485 33.55 46.9285 33.694C47.4205 33.838 47.8105 34.018 48.0985 34.234V35.962C47.7265 35.722 47.3185 35.536 46.8745 35.404C46.4425 35.272 45.9385 35.206 45.3625 35.206C43.4305 35.206 42.4645 36.244 42.4645 38.32C42.4645 40.396 43.4125 41.434 45.3085 41.434C45.9205 41.434 46.4425 41.368 46.8745 41.236C47.3185 41.092 47.7265 40.912 48.0985 40.696V42.424C47.7865 42.628 47.3965 42.808 46.9285 42.964C46.4605 43.108 45.8845 43.18 45.2005 43.18ZM54.1976 35.35V43H52.1096V35.35H49.2836V33.658H57.0776V35.35H54.1976ZM62.4915 43.18C61.8315 43.18 61.2195 43.072 60.6555 42.856C60.0915 42.64 59.5995 42.328 59.1795 41.92C58.7715 41.5 58.4475 40.99 58.2075 40.39C57.9795 39.79 57.8655 39.1 57.8655 38.32C57.8655 37.54 57.9795 36.85 58.2075 36.25C58.4475 35.65 58.7715 35.146 59.1795 34.738C59.5995 34.318 60.0915 34.006 60.6555 33.802C61.2195 33.586 61.8315 33.478 62.4915 33.478C63.1515 33.478 63.7635 33.586 64.3275 33.802C64.8915 34.006 65.3835 34.318 65.8035...

CSS

.container {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.grad {
  position: absolute;
  top: 100px;
  bottom: 30px;
  left: 0;
  width: 60px;
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  
  animation: loading 2s infinite ease;
}

@keyframes loading {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}