JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

<div class="mymaincontainer">
    <div class="mycontainer">
        <div class="mycards">
           
            <div class="mycard">
                <div class="mycolour"></div>
                <div class="mycard-text">
                    <h3>Tanjiro</h3>
                    <p>Breathing Technnique: <b>Water/Sun</b></p>
                </div>
                <div class="mycolour-bottom"></div>
            </div>
            <div class="mycard ">
                <div class="mycolour"></div>
                <div class="mycard-text">
                    <h3>Nezuko</h3>
                    <p>Demon : Can do <b>blood magic</b>.</p>
                </div>
                <div class="mycolour-bottom"></div>
            </div>
            <div class="mycard ">
                <div class="mycolour"></div>
                <div class="mycard-text">
                    <h3>Zenitsu</h3>
                    <p>Breathing Technnique: <b>Thunder</b></p>
                </div>
                <div class="mycolour-bottom"></div>
            </div>
        </div>
      
    </div>
  
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Fira+Mono:wght@500&display=swap');
.mymaincontainer{
    min-height: 65vh;
   
    display: flex;
    justify-content: center;
    align-items: center;
    
    flex-wrap: wrap;
    font-family: 'Fira Mono', monospace;
}
*{
  box-sizing: border-box;
}
h3 {
    font-family: 'Permanent Marker', cursive;
}
.box {
  
  aspect-ratio: 1;
  clip-path: polygon(88.81% 81.52%,49.55% 100.00%,10.63% 80.82%,1.36% 38.44%,28.71% 4.76%,72.10% 5.15%,98.84% 39.31%);
  margin: 30px;
  filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.9));
}
.mycontainer{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mycards {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
     filter: drop-shadow(0 6px 13px #000);
    
}
.mycard {
    overflow: hidden;
    text-align: center;
    position: relative;
    width: 300px;
    height: 300px;
    background-image: url("https://namratapdrjs.netlify.app/scrolling-animations/assets-card/tanjiro.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50px;
    /*background: linear-gradient(145deg, #e6e6e6, #ffffff);
   */ 
   filter: drop-shadow(0 6px 13px #000);
    transform: scale(1.05);
    margin: 2rem;
     aspect-ratio: 1;
  clip-path: polygon(88.81% 81.52%,49.55% 100.00%,10.63% 80.82%,1.36% 38.44%,28.71% 4.76%,72.10% 5.15%,98.84% 39.31%);
  
}

.mycolour{
    position: absolute;
    width: 100%;
    height:15%;
    background: rgb(255,60,14);
background: linear-gradient(125deg, rgba(255,60,14,1) 28%, rgba(255,255,102,1) 89%);
    right: 120px;
    top:40px;
    transform: rotate(-45deg) translateY(-90px); 
}
.mycolour::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom:40px;
    background-color: #FF3C0E;
     transform:...