JSFiddle - React, Tailwind, and code Playground

by Miklos Nagy

HTML

<div class="ul">
  <div class="li"> 
    <div class="weboldal-keszites-elemek-keppel"></div>
  </div>
  <div class="li">B </div>
  <div class="li">C</div>
</div>

SCSS

body{background:#efeae6;}

.ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

div.li {
  background-color: #aaaaaa00;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
	list-style-type:none;
	
	.weboldal-keszites-elemek-keppel{
		width: 200px;
    height: 200px;
    margin: 0 auto;
    box-shadow: 0px 0px 55px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    
    background: url('https://i.pinimg.com/originals/70/e0/74/70e0744bb3d96c8ea980ac8579fc1bef.gif') no-repeat center;
    background-size: 150%;
    
		&:after{
			display: inline-block;
			content:"";
			border-radius:inherit;
			width:200px;
		 height:200px;
			background:#fff;
			z-index:-1;
			margin:5% auto auto 10%;
			position:absolute;
		}
	}
}