JSFiddle - React, Tailwind, and code Playground
by erenozten
HTML
<!-- Vocabulary Finder -->
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="grayBg" style="height: 535px; margin-left: 0px; border:1px solid blue;">
<div class="theLabel">
<label class="theLabel">Cast a Magic </label>
<input id="theWord" onclick="focusInBosalt()" type="text" value="kaboom!" style="font-style: italic" class="theLabel" />
</div>
<div class="theLabel">
<label class="theLabel">Status</label>
<select id="" name="country" class="theLabel">
<option disabled="" selected="">Are you feeling lucky?</option>
<option value="">I found 10$ on the ground at work</option>
<option value="">I'm Feeling Lucky</option>
</select>
</div>
<style>
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: none;
}
pre, xmp, plaintext, listing {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px;
transition: color 5s ease-in-out;
-moz-transition: color 5s ease-in-out;
text-decoration: none;
-webkit-animation: zomg 7s infinite;
animation: zomg 11s infinite;
}
.wrapper {
height: 11%;
width: 11%;
left:0;
right: 0;
top: 0;
bottom: 0;
height: 45px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;}
...