JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<html>
<head>

<style>
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&family=Quicksand:wght@500&display=swap');
h2{
  font-family: 'Quicksand', sans-serif;
}
  html, body{
    --text-color: #212529;
    --surface-overlay: #ffffff;
    --surface-ground: #efefef;
    --primary-color: #007bff;
    --primary-color-text: #ffffff;
    width:100%;
    height:100%;
    overflow:hidden;
    padding:0px;
    margin:0px;
    font-family:'Quicksand', sans-serif;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    color: var(--text-color);
    background-color: var(--surface-ground);
  }
  
  .panel{
    background: var(--surface-overlay);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    position:relative;
  }
  
  .button-cont{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    width:15rem;
  }
  
  button{
    background-color: var(--primary-color);
    color:var(--primary-color-text);
    border: 1px solid var(--primary-color);
    margin: 0;
    display: inline-flex;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    vertical-align: bottom;
    justify-content: center;
    text-align: center;
    padding: 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    font-family:'Quicksand', sans-serif;
  }

@media (prefers-color-scheme: dark) {
  body {
    --surface-overlay: #2a323d;
    --surface-ground: #20262e;
    --text-color: rgba(255, 255, 255, 0.87);
    --primary-color: #8dd0ff;
    --primary-color-text: #151515;
  }
}

svg path, svg circle {
  fill: none;
  stroke:  var(--text-color);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: 0.2s;
   stroke-width:1;
}
.icon {
  position:absolute;
  top:-1rem;
  left:calc(50% - 1rem);
  background-color: var(--surface-ground);
  border-radius:50%;
  padding:0.3rem;
}

@media (orientation: landscape) { }
  @media (orientation: portrait) {
    .icon {...