JSFiddle - React, Tailwind, and code Playground

by Ico Dimchev

HTML

<form action="/">
  <label>
      <input type="radio" name="gender" value="male">
      <span class="label">Мъжко</span>
    </label>
  <label>
      <input type="radio" name="gender" value="female">
      <span class="label">Женско</span>
    </label>
  <label>
      <input type="radio" name="gender" value="modern">
      <span class="label">Модерно</span>
      <input type="text" name="gender" placeholder="Ко си ва?" autocomplete="gender-identity">
    </label>
</form>

CSS

form {
  max-width: 50vw;
  margin: 0 auto;
  font-size: 5vw;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
}

form * {
  font-size: inherit;
}

label {
  display: block;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked+.label {
  font-weight: bold;
}

input:hover {
  outline: none
}

input[value="modern"]:checked~input[type="text"][name="gender"] {
  opacity: 1;
}

input[type="text"][name="gender"] {
  display: block;
  padding: 5px;
  opacity: 0;
  margin-top: 1em;
  transition: opacity .3s ease-in-out;
  color: white;
  border: none;
  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 1800% 1800%;
  animation: rainbow 18s ease infinite;
}

@keyframes rainbow {
  0% {
    background-position: 0% 82%
  }
  50% {
    background-position: 100% 19%
  }
  100% {
    background-position: 0% 82%
  }
}