JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="box-container">
  <div class="box">
    <div class="img"></div>
  </div>
</div>

CSS

body {
  background: #fff url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4owD-nVEmGZry08KffxVhrCwQLdPpwgeD5Q&usqp=CAU') no-repeat;
  background-size: 100% 140px;
}

.box-container {
  overflow: hidden;
  position: relative;
  width: 266px;
  /* width: 50%; */
  height: 0;
  padding-top: 120.30%;
  /* background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_bd_605_2740)'%3E%3Cpath d='M139.385 27.3974C151.423 17.5342 168.578 17.5342 180.615 27.3974L199.701 43.0355C203.625 46.2501 208.22 48.5043 213.134 49.6243L237.038 55.0728C252.114 58.5093 262.81 72.1703 262.745 87.9059L262.641 112.855C262.619 117.983 263.754 123.049 265.958 127.66L276.68 150.092C283.442 164.24 279.625 181.275 267.505 191.034L248.29 206.507C244.34 209.688 241.159 213.749 238.994 218.38L228.46 240.904C221.815 255.11 206.359 262.691 191.312 259.125L167.455 253.47C162.55 252.307 157.45 252.307 152.545 253.47L128.688 259.125C113.641 262.691 98.1845 255.11 91.5404 240.904L81.0061 218.38C78.8406 213.749 75.6604 209.688 71.7104 206.507L52.4948 191.034C40.3753 181.275 36.558 164.24 43.3201 150.092L54.0416 127.66C56.2455 123.049 57.3806 117.983 57.3592 112.855L57.2553 87.9059C57.1898 72.1703 67.8858 58.5093 82.9622 55.0728L106.866 49.6243C111.78 48.5043 116.375 46.2501 120.299 43.0355L139.385 27.3974Z' fill='white' fill-opacity='0.1' shape-rendering='crispEdges'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_bd_605_2740' x='0' y='0' width='320' height='320' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeGaussianBlur in='BackgroundImageFix' stdDeviation='5'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_605_2740'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='20'/%3E%3CfeGaussianBlur...