JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="punch">
  <div class="content">
    <p>content</p>
    
  </div>
  <div class="button">
    <p>button</p>
  </div>
</div>


<div class="punch">
  <div class="content">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </div>
  <div class="button">
    <p>button</p>
  </div>
</div>

CSS

:root {
  --line-bg: #dddddd;
  --bg: #ffffff;
}

html, body {
  height: 100%;
  background: #ffffff;
}
body {
  /* background: linear-gradient(to bottom, #140409 0%,#d81518 100%); */
}
.punch {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  width: 90%;
  height: 146px;
  margin: 30px;
}

.content::before, .button::before { 
  position: absolute;
  content: '';
  inset: -1px;
  /* top: 0;
  left: 0; */
  z-index: -1;
  /* width: 100%;
  height: 100%; */
  border-radius: 8px;
  background-repeat: no-repeat;
  background-size: 51% 100%,  50% 100%;
}
.content::before {
  
  background-image: 
    radial-gradient(
      circle at 0% 100%, 
      transparent 0%,
      transparent 12px,
      var(--line-bg) 13px,
      var(--line-bg) 100%,transparent 100%), 
    radial-gradient(
      circle at 100% 100%, 
      transparent 0%,
      transparent var(--radial-radius),
      var(--line-bg) calc(var(--radial-radius) + 1px),
      var(--line-bg) 100%,transparent 100%);
    
    background-position: left bottom, right bottom;
}
.button::before {
  --background-color: #ffffff;
  background-image: 
    radial-gradient(
      circle at 0% 0%, 
      transparent 0%,
      transparent 12px,
      var(--line-bg) 13px,
      var(--line-bg) 100%,transparent 100%), 
    radial-gradient(
      circle at 100% 0%, 
      transparent 0%,
      transparent var(--radial-radius),
      var(--line-bg) calc(var(--radial-radius) + 1px),
      var(--line-bg) 100%,transparent 100%);
    background-position: left top, right top;
    background-size: 51% 100%,  50% 100%;
   }

.content, .button { 
  overflow: hidden;
  position: relative;
  /* border: 1px solid transparent; */
  flex: 1;
  border-radius: 8px;
  padding: 1px;
}
.content {
  
  --radial-radius: 12px;
  
  
  background-image: 
    radial-gradient(
      circle at 0% 100%, 
     ...

JavaScript

/* const body = document.querySelector('body');

setInterval(function(){
  let r = Math.random() * 255;
  let g = Math.random() * 255;
  let b = Math.random() * 255;
   body.style.background = 'rgba('+ r + ',' + g + ',' + b +',1)'
}, 2000); */