JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">


<input type="radio" id="radio1" name="radio-group">
<label for="radio1">Option 1</label>

<input type="radio" id="radio2" name="radio-group">
<label for="radio2">Option 2</label>


<input type="checkbox" id="checkbox1" name="checkbox-group">
<label for="checkbox1">Option 1</label>

<input type="checkbox" id="checkbox2" name="checkbox-group">
<label for="checkbox2">Option 2</label>

CSS

@font-face {
  font-family: "Founders Grotesk Text";
  src: url("https://univeastlonddev.prod.acquia-sites.com/sites/default/files/cohesion/founders-grotesk-text-light-new.woff")
      format("woff"),
    url("https://univeastlonddev.prod.acquia-sites.com/sites/default/files/cohesion/founders-grotesk-text-light-new.woff2")
      format("woff2"),
    url("https://univeastlonddev.prod.acquia-sites.com/sites/default/files/cohesion/FoundersGroteskText-Light-new.ttf")
      format("truetype");
  font-display: swap;
}
body {
  font-family: "Founders Grotesk Text";
}

[type="radio"] {
  display: none; /* Hide the default radio button */
}

[type="radio"] + label {
  position: relative;
  padding-left: 36px; /* Add space for the custom radio button */
  cursor: pointer;
  font-size: 24px; /* Control the size of the radio button using font-size */
}

[type="radio"] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1em; /* Use em units for dynamic sizing */
  height: 1em; /* Use em units for dynamic sizing */
  border: 3px solid #696868;
  background: #fff;
  box-sizing: border-box;
  transition: border 0.4s ease-in-out;
  border-radius:100%;
}

[type="radio"] + label:after {
  content: "";
  width: 0.75em; /* 75% of the width and height of the :before pseudo-element */
  height: 0.75em; /* 75% of the width and height of the :before pseudo-element */
  background: #10cfc9;
  position: absolute;
  top: 0.125em; /* (1em - 0.75em) / 2 */
  left: 0.125em; /* (1em - 0.75em) / 2 */
  box-sizing: border-box;
  transform: scale(0); /* Initially hidden */
  transition: transform 0.2s ease;
  border-radius: 100%;
}

[type="radio"]:checked + label:after {
  transform: scale(1); /* Show when checked */
}


[type="checkbox"] {
  display: none; /* Hide the default checkbox */
}

[type="checkbox"] + label {
  position: relative;
  padding-left: 36px; /* Add space for the custom checkbox */
  cursor: pointer;
  font-size: 24px; /* Control the size of the...