JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="hangtag">
  <button class="hangtag__toggler"></button>
  <div class="hangtag__form">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo quia nemo eos, nesciunt maxime molestias delectus laboriosam placeat natus dolorem. Non dolorem quas quaerat laudantium! Hic inventore accusamus aliquid rem a non velit quibusdam ad eius quia eligendi quam, obcaecati fugit blanditiis maiores tempore. Nulla velit sed dolor, modi nostrum libero officiis delectus. Fugit expedita repudiandae nostrum laudantium blanditiis laboriosam tempora excepturi est error veritatis esse reiciendis, fuga in itaque voluptatem similique sed? Molestias aperiam deserunt, dolorem corrupti, voluptatem vel tempora dolore molestiae ab saepe voluptates ipsam laborum porro cum rem! Quae neque explicabo autem, repellendus tenetur error dolores eligendi!
  </div>
</div>

CSS

.hangtag {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: lightblue;
}

.hangtag__toggler {
  width: 4rem;
  height: 4rem;
  background-color: aqua;
  border: none;
  border-radius: 50%;
}

.hangtag__form {
  position: absolute;
  bottom: 3rem;
  right: 0;
  width: 10rem;
  background-color: lightcoral;
}