JSFiddle - React, Tailwind, and code Playground

by Kofod

HTML

<div>

<div class="language of flowers" style="overflow: auto; position: absolute; width: 230px; height: 200px; top: 135px; left: 57px; margin-right: -230px; margin-bottom: -319px; text-align: center;">Want to tell someone how you feel about them?<br><br>What better way to do that, than with flowers! <br><br>
So we have brought you a guide of flowers and their meaning.
</div>




<div class="hide Roses" style="position: absolute; overflow: auto; width: 300px; height: 170px; top: 150px; left: 360px; margin-right: -230px; margin-bottom: -319px;"><b style="font-size: 20px;">Roses</b><br><br>
<b>Red Roses</b> - They are often associated with the Greek goddess of love, Aphrodite. These flowers represent love
<br><br>
<b>1 Rose</b> – Love at first sight 
<br><br>
<b>2 Roses</b> – Love and affection 
<br><br>
<b>3 Roses</b> – Usually given as a gift for a one-month anniversary 
<br><br>
<b>6 Roses</b> – You're infatuated and want the recipient to be yours 
<br><br>
<b>10 Roses</b> – You want to tell them that their love is perfect 
<br><br>
<b>12 Roses</b> – This is a classic bouquet size to ask someone to be yours 
<br><br>
<b>15 Roses</b> – Give 15 roses to say sorry 
<br><br>
<b>24 Roses</b> – This huge bunch of roses simply says 'I'm yours' 
<br><br>
<b>50 Roses</b> – That's a lot of roses! This is the ultimate romantic bouquet when you want to make an impression 
<br><br>
<b>100 Roses</b> – This grand statement suggests that your love is in bountiful supply and will last forever.
<br><br><br>
<b>Yellow Roses</b> - Just like most yellow flowers, these represent joy and friendship, combining the love that roses are linked to with the color of friendship.
<br><br>
<b>Lavender Roses</b> - The mesmerizing purple shades in this flower stand for enchantment. You can gift these to someone you’re seeing as your romance blossoms.
<br><br>
<b>Pink Roses</b> - The perfect flower to show gratitude, appreciation and admiration.

</div>




<div class="hide Tulips"...

JavaScript

$('.button').click(function() {
  var textBox = this.className.split(' ')[1];
  $('.hide').hide();
  $('.' + textBox).show();
});