JSFiddle - React, Tailwind, and code Playground

New try on blocks!

by nilloc

HTML

<svg id="clippy" width="102px" height="36px" viewBox="0 0 102 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs></defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="statement-svg-bg-top" fill="#FFBC00" stroke="#CCCCCC">
            <path d="M101.5,26.0007252 L101.5,3.9992748 C101.5,2.06450341 99.9316657,0.5 97.9935234,0.5 L42.9925155,0.5 C42.5810889,0.5 41.9413512,0.766856655 41.6427204,1.06542862 L37.0654992,5.64174783 C36.5813167,6.12583493 35.6830143,6.5 34.9992232,6.5 L21.0022927,6.5 C20.3144031,6.5 19.4236242,6.12927184 18.9359869,5.64175765 L14.3585115,1.06543843 C14.0614833,0.768485217 13.4146037,0.5 12.9931545,0.5 L3.99310226,0.5 C2.06380684,0.5 0.5,2.06634418 0.5,3.9992748 L0.5,26.0007252 C0.5,27.9356845 2.06551988,29.5 3.99976742,29.5 L53.9984217,29.5 C54.6882403,29.5 55.577361,29.8701977 56.065529,30.3582423 L60.6430043,34.9345616 C60.9401907,35.2316729 61.5844104,35.5 62.0022927,35.5 L75.9992232,35.5 C76.4213062,35.5 77.0579355,35.2350388 77.3584621,34.9345714 L81.9356833,30.3582522 C82.4197077,29.8743231 83.3152109,29.5 83.9958918,29.5 L97.9940546,29.5 C99.934435,29.5 101.5,27.93538 101.5,26.0007252 Z" id="Path-Copy"></path>
        </g>
    </g>
</svg>
<br>
<div class="block">testerino</div><br>
<div class="block svg">testerino</div>

CSS

.block{
  --block-color:hsla(44, 100%, 50%, 1);
  --block-transparent:hsla(44, 100%, 50%, 0);
  
  box-sizing:border-box;
  display:inline-block;
  position:relative;
  padding:6px 10px;
  border-radius:4px;
  color:white;
  font-family:monospace;
  margin-bottom:1px;
  
  /* background-color:teal; */
  background-repeat:no-repeat;
  
  background-image:
    /* left */
    linear-gradient(
      0deg,
      var(--block-color) 0px,
      var(--block-color) 10px
    ),
    /* bottom */
    linear-gradient(
      0deg,
      var(--block-color) 0px,
      var(--block-color) 10px
    ),
    /* right */
    linear-gradient(
      0deg,
      var(--block-color) 0px,
      var(--block-color) 10px
    ),
    /* notch left */
    linear-gradient(
      -135deg,  
      var(--block-transparent) 8px, 
      var(--block-color) 8px
    ),
    /* notch right */
    linear-gradient(
      135deg,  
      var(--block-transparent) 8px, 
      var(--block-color) 8px
    );
  
  background-size:
    20px 100%, /* left */
    100% 100%, /* bottom */
    100% 100%, /* right */
    14px 14px, /* notch left */
    14px 14px  /* notch right */
  ;
  
  background-position:
    left 0px  top 0px, /* left */
    left 0px  top 6px, /* bottom */
    left 60px top 0px, /* right */
    left 18px top 0px, /* notch left */
    left 48px top 0px  /* notch right */
  ;
}

.block::after{
  content:"";
  /* background-color:hsla(88, 100%, 50%, 1); */
  position:absolute;
  height:7px;
  width:48px;
  bottom:-6px;
  left:16px;
  
  background-repeat:no-repeat;
  background-image:
    /* notch left */
    linear-gradient(
      45deg,  
      var(--block-transparent) 8px, 
      var(--block-color) 8px
    ),
    /* notch right */
    linear-gradient(
      -45deg,  
      var(--block-transparent) 8px, 
      var(--block-color) 8px
    );
    
  background-size:
    calc(100% - 14px) 14px, /* notch left */
    14px 14px               /* notch right */
  ;
  background-position:
    left 0px  bottom...