JSFiddle - React, Tailwind, and code Playground

by ericaheinz

HTML

<div class="multipart">
        
          <input type="text" class="love" id="love1">
          
          <div class="multipart__menu" id="titles1" >
            <button onclick="showme()">Title 1</button>
            <button>Title 2</button>
          </div>
          
          <div class="multipart__why" id="why1">
            <h4>Why?</h4>
            <button class="toggle" onclick="toggle(this)">Option A</button>
            <button class="toggle" onclick="toggle(this)">Option B</button>
            <button class="toggle" onclick="toggle(this)">Option C</button>
            <button class="toggle" onclick="toggle(this)">Option D</button>
            <button class="toggle" onclick="toggle(this)">Option E</button>
            <button class="toggle" onclick="toggle(this)">Option F</button>
          </div>
          
        </div>

CSS

input[type='text'] {
    border: 2px solid #EB2B5E;
    background: #FFF url() no-repeat 5px 5px;
    display: block;
    width: 480px;
    margin: 16px auto;
    font-size: 18px;
    padding: 10px 10px 10px 42px;
  }

  .multipart {
    position: relative;
  }
    .multipart__menu {
      display: none;
      position: absolute;
      width: 480px;
      border: 1px solid #DDD;
      border-bottom: 0;
      border-top: 0;
      z-index: 99;
      top: 45px;
      left: 80px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    }
    .multipart input:focus + .multipart__menu {
      display: block;
    }

      .multipart__menu button {
        display: block;
        width: 100%;
        font-size: 16px;
        cursor: pointer;
        padding: 10px 10px 10px 46px;
        text-align: left;
        background-color: #fff; 
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid #eeeeee; 
      }
      .multipart__menu button:hover {
        background-color: #FEF4F7; 
        cursor: pointer;
      }
      
    .multipart__why {
      display: none;
    }




/* BUTTONS */

.toggle {
  display: inline-block;
  margin: 0 1px 8px 0;
  padding: 0px 10px;
  background: white;
  color: #222;
  border: 1px solid #00B7FF;
  border-radius: 13px;
  height: 24px;
  line-height: 22px;
  font-size: 14px;
  transition: all .1s ease-in-out;
}
  .toggle:hover {
    cursor: pointer;
    color: #00B7FF;
  }  
  .toggle.is-on {
      background: #00B7FF;
      color: white;
  }

JavaScript

function showme() {
      alert("Woo!");
      var y = document.getElementById("why1");
      y.style.display = "block";
      var z = document.getElementById("love1");
      z.value = "Title 1";
    } 

    function toggle(button) {
      button.classList.toggle("is-on");
    }