JSFiddle - React, Tailwind, and code Playground
by djp3d
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
@font-face {
font-family: "Roadgeek2005Series3W";
src: url("fonts/Roadgeek_2005_Series_3W.ttf");
}
@font-face {
font-family: "Roadgeek2005Series5B";
src: url("fonts/Roadgeek_2005_Series_5B.ttf");
}
.noselect {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently supported by Chrome and Opera */
}
body {
font-family: "Roadgeek2005Series3W" !important;
background-color: #058586;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
padding-top: 10px;
}
.panel-heading {
margin-top: 10px;
padding: 0px;
}
.panel-title a {
color: white;
}
.panel-default>.panel-heading {
background-color: #00A388;
border-radius: 12px;
border: 2px solid white;
}
.panel-body {
background-color: #7BC473;
border-radius: 12px;
margin-top: 10px;
}
.panel-default>.panel-heading+.panel-collapse>.panel-body {
...