JSFiddle - React, Tailwind, and code Playground

by Dipesh Raichana

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css">
<button class="btn-yellow" id="signup">Sign Up</button>
<div id="popup" class="popup hide">
    <div class="validation-line"></div>
    <center>
        <div class="btn-row">	<a href="domainSearch.html" class="link">
			<div class="box-btn">
			<img src="style/img/university.jpg" class="img"><hr>
				<div class="caption animated slideInUp">&nbsp;&nbsp;&nbsp;Institution</div>
	</div></a>

<a href="domainSearch.html" class="link">
	<div class="box-btn">
	<img src="style/img/university.jpg" class="img">
	<div class="caption animated slideInUp">&nbsp;Administrator</div>
</div></a>

<a href="domainSearch.html" class="link">
<div class="box-btn">
<img src="style/img/university.jpg" class="img"><hr>
<div class="caption animated slideInUp">District Admin</div>
						</div>
						</div></a>

            <div class="btn-row">	<a href="domainSearch.html" class="link">
								<div class="box-btn">
								<img src="style/img/university.jpg" class="img">
								<div class="caption animated slideInUp">&nbsp;&nbsp;&nbsp;&nbsp;Educator</div>
							</div></a>
	<a href="domainSearch.html" class="link">
								<div class="box-btn">
								<img src="style/img/university.jpg" class="img"><hr>
								<div class="caption animated slideInUp">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Parent</div>
							</div></a>
	<a href="domainSearch.html" class="link">
								<a href="domainSearch.html" class="link">
								<div class="box-btn">
									<img src="style/img/university.jpg" class="img">
									<div class="caption animated slideInUp">&nbsp;&nbsp;&nbsp;&nbsp;Student</div>
								</div>
							</a>

            </div>
    </center>
    </div>

CSS

.popup, .hide, .show {
    height: 600px;
    width: 600px;
    margin: 0px auto;
}
.hide {
    display: none;
}
.show {
    display: inline-block;
}
.btn-row {
    margin: 40px 0px 0px 0px;
    display: inline-flex;
}
.box-btn {
    height: 150px;
    width: 150px;
    border-radius: 10px;
    border: 1px solid #bdc1c4;
    background-color: #FFFFFF;
    margin: 0px 10px 0px 10px;
    outline: none;
}
.img:hover + .caption {
    display: inline;
}
.popup-label {
    font-size: 2em;
    margin-top: 20px;
    font-weight: bold;
}
.ui-dialog-titlebar-close {
    visibility: hidden;
}
.img {
    height: 90px;
    width: 120px;
    padding: 20px 0px 0px 0px;
    display: flex;
}
.caption {
    display: none;
    text-align: center;
    font-size: 1.4em;
    color: #444444;
    position: absolute;
    margin: 10px 0px 0px -69px;
}
a {
    text-decoration: none;
    outline: none;
}
.caption-border {
    background-color: #F0EFF0;
    position: absolute;
    height: 1px;
    width: 170px;
}

JavaScript

$("#popup").dialog({
     width: 600,
     autoOpen: false,
     show: {
         effect: "fade",
         duration: 1000
     },
 });
 $("#popup").dialog("open");