JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<!-- https://x.com/Robby_WebDesign/status/1911737410104512823 -->

CSS

.container {
  width: 600px;
  height: 600px;
  margin: auto;
  background: url("https://images.unsplash.com/photo-1745089027073-aaf5181be1b8?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat 0 0;
  background-size: cover;
.container::before {
  background-color: rgba(0,0,0,.8);
.item(n) {
  background: url()
  clip-path: circle(0% at 50% 50%);
  opacity: 0→opacity: n