JSFiddle - React, Tailwind, and code Playground

by Alexus fox

HTML

<h1>CALL 24/7</h1>
<h2>TEXT</h2>
<h3>CHAT</h3>
<h4>CALL</h4>
<a href="default.asp" target="_blank">TEXT</a>
<div class="test1">
  456-678-7890
</div>
<div class="dropdown">
  <button class="dropbtn"></button>
  <div class="dropdown-content">
    <a href="#">CALL</a>
    <a href="#">TEXT</a>
    <a href="#">CHAT</a>
    <a href="#">LEARN</a>
  </div>
</div>

CSS

a:link{
  font-size: 35px;
  font-family: pt sans narrow, san-serif;
position: absolute;
  top:135px;
  left:15px;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}


h1 {
  font-size: 65px;
  font-family: pt sans narrow, san-serif;
  position: absolute;
  top: -40px;
  left: 30px;
  right: 0;
  width: 100%;
  height: 70px;
  border: 3px ;
}

h2 {
  font-size: 35px;
  font-family: pt sans narrow, san-serif;
  position: absolute;
  top: 120px;
  left: 40px;
  right: 0;
  width: 100px;
  height: 70px;
  border: 3px;
}
h3 {
  font-size: 35px;
  font-family: pt sans narrow, san-serif;
  position: absolute;
  top: 150px;
  left: 40px;
  right: 0;
  width: 100px;
  height: 70px;
  border: 3px;
}
h4 {
  font-size: 35px;
  font-family: pt sans narrow, san-serif;
  position: absolute;
  top: 175px;
  left: 40px;
  right: 0;
  width: 100px;
  height: 70px;
  border: 3px;
}
/* Style The Dropdown Button */

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: absolute;
  top: 65px;
  left: 0px;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  font-family: pt sans narrow, san-serif;
  background-color: #f9f9f9;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #f1f1f1
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}


/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {
  background-color:...

JavaScript

$(function() {

  $('div.test1').on('click', function() {
    $(this).toggleClass('toggledClass');
  });

  $('div.test2').on('click', function() {
    var toggled = $(this).data('toggled');
    if (toggled) {
      $(this).animate({
        borderWidth: '1px',
        fontSize: '100%'
      }, 1000, 'linear');
    } else {
      $(this).animate({
        borderWidth: '10px',
        fontSize: '300%'
      }, 1000, 'linear');
    }
    $(this).data('toggled', !toggled);
  });

});