JSFiddle - React, Tailwind, and code Playground

HTML

<div id="show">Show Me</div>
<div id="visible">Hello, My name is amr.</div>

CSS

#show, #hide {
    margin:10px 0;
    width:80px;
    height:auto;
    color:#fff;
    text-align:center;
    font-family:"Myriad Pro", Helvetica, Arial, sans-serif;
	font-size:19px;
	font-weight:700;
    -moz-box-shadow:inset 0 1px 0 0 #cae3fc;
	-webkit-box-shadow:inset 0 1px 0 0 #cae3fc;
	box-shadow:inset 0 1px 0 0 #cae3fc;
	background:0 color-stop(1,#4197ee) );
	background:0;	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff',endColorstr='#4197ee');
	background-color:#79bbff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #469df5;
    padding:3px 23px;
	text-decoration:none;
	cursor:pointer;
	text-shadow:1px 1px 0 #287ace;
}

#visible {
    display:none;
    margin:20px 0;
    padding:10px;
    width:200px;
    height:auto;
    color:#fff;
    text-align:center;
    font-family:"Myriad Pro", Helvetica, Arial, sans-serif;
	font-size:19px;
	font-weight:700;
    -moz-box-shadow:inset 0 1px 0 0 #cae3fc;
	-webkit-box-shadow:inset 0 1px 0 0 #cae3fc;
	box-shadow:inset 0 1px 0 0 #cae3fc;
	background:0 color-stop(1,#4197ee) );
	background:0;	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff',endColorstr='#4197ee');
	background-color:#79bbff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #469df5;
    padding:3px 23px;
	text-decoration:none;
	cursor:text;
	text-shadow:1px 1px 0 #287ace;
}

JavaScript

$(document).ready(function(){
	$("#show").click(function(){
		$('#visible').slideToggle();
        $('#show').html('Hide me');
	});
})