JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/primeflex/3.3.1/primeflex.min.css" integrity="sha512-lgW20MsPeg254Pqm/Wfu3UrS0b5z5VoLcfgYthMePeoCUR8hgiswV9FllOYd3YZvckbjz+jnfiAMnXjSQmeB5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<label class="updownb inline-block border-round-sm">
  <input type="checkbox" class="updownb-cb">
  <div class="flex flex-column inline-block gap-1 align-items-center">
    <span class="first">MVP</span>
    <span class="middle h-05rem" >&#9013;</span>
    <span class="last">GTRED</span>
  </div>
</label>

CSS

body{
  --text-color: #212529;
  --text-color-secondary: #6c757d;
  --primary-color: #00838f;
  --environment-color: #00838f;
 --primary-color-hover: color-mix(in srgb, var(--primary-color), #000 15%);
    font-size: 12px;
  font-family: sans-serif;
}
/*
.flex { display:flex !important}
.flex-column {	flex-direction: column;}
.flex-row {	flex-direction: row;}
.inline-block	{display: inline-block;}
.gap-1	{gap: 0.25rem;}
.gap-01	{gap: 0.1rem;}
.align-content-center	{align-content: center;}
.align-items-center	{align-items: center;}
.h-1rem	{height: 1rem;}
.h-05rem	{height: 0.5rem !important;}
.border-round-xs	{border-radius: 0.125rem;}
.border-round-sm	{border-radius: 0.25rem;}
*/
.updownb {
  color: #ffffff;
  border: 1px solid var(--primary-color);
  background: var(--primary-color);
  padding: 0.3rem 0.2rem;
  /*border-radius: 0.4rem;*/
  margin:0px;
  cursor: pointer;
  overflow-y: hidden;
  position:relative;
  height:0.7rem !important;
}

.updownb input {
  position:absolute;
  height: 0;
  width: 0;
  visibility: hidden; margin: 0px;
}
.updownb div {
  transition: transform 0.6s ease;
}
.updownb .middle {
  transition: all 0.6s ease;
 line-height: 0.2rem;
 color: transparent;
}


.updownb:hover{
  background: var(--primary-color-hover);
}
.updownb:hover  div{
  transform: translateY(-20%)
}.updownb:hover  .middle {
  color:yellow
}
.updownb:hover .updownb-cb:checked + div{
  transform: translateY(-50%)
}
.updownb-cb:checked + div{
  transform: translateY(-65%)
}
.updownb-cb:checked + div .middle{
  transform: rotate(180deg)
}