JSFiddle - React, Tailwind, and code Playground

by Kyle Vassella

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="unico.css" />
</head>

<body>
<div id="BIGmenu">

<table id="TOPmenu" width="500">
<tr>
    <td><a href="1">ссылка 1</a></td>
    <td><a href="2">ссылка 2</a></td>
    <td><a href="3">ссылка 3</a></td>
    <td><a href="4">ссылка 4</a></td>
</tr>
</table>


<div id="menu">
 <table id="Lmenu" width="500">
<tr>
  <tr><td><a href="1">ссылка 5</a></td></tr>
  <tr><td><a href="2">ссылка 6</a></td></tr>
  <tr><td><a href="3">ссылка 7</a></td></tr>
  <tr><td><a href="4">ссылка 8</a></td></tr>
</tr>
</table>

 
 
 <table id="Rmenu" width="500">
<tr>
  <tr><td><a href="1">ссылка 9</a></td></tr>
  <tr><td><a href="2">ссылка 10</a></td></tr>
  <tr><td><a href="3">ссылка 11</a></td></tr>
  <tr><td><a href="4">ссылка 12</a></td></tr>
</tr>
</table>
</div>
</div>


<div id="LITTLEmenu">

<table id="Smallmenu" >
<tr>
    <td><a href="1">ссылка 1</a></td>
    <td><a href="2">ссылка 2</a></td>
    <td><a href="3">ссылка 3</a></td>
</tr>
</table>


<table id="Smallmenu" >
<tr>
    <td><a href="1">ссылка 1</a></td>
    <td><a href="2">ссылка 2</a></td>
    <td><a href="3">ссылка 3</a></td>
</tr>
</table>

<table id="Smallmenu" >
<tr>
    <td><a href="1">ссылка 1</a></td>
    <td><a href="2">ссылка 2</a></td>
</tr>
</table>

<table id="Smallmenu" >
<tr>
    <td><a href="1">ссылка 1</a></td>
    <td><a href="2">ссылка 2</a></td>
</tr>
</table>


</div>

 <canvas id="canvas" width="500" height="500" ></canvas>

</body>
</html>

CSS

@media screen and (min-width: 776px) { /*большой*/

#LITTLEmenu {display:none}
body {
background: #333333;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
table {border-spacing: 7px 11px;
  border:0px;
}

td {
  padding: 10px;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
  color: #ffffff;
  background-color: #0095ff;
  border: 0px solid #0095ff;
}
a {
   white-space: nowrap;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  vertical-align: middle;
  text-align: center;
  color: #ffffff;
  font-size: 2vw;
}

canvas{
	color: #E44CE4;
	background-color: #1DAB1D;
	float: left;
	width: 67%;
	height: 67%;
	margin: 1%;
	border-radius: 10px;
	border: 0px solid #B13032;
}

#TOPmenu{width: 100%;}
#Lmenu{width: 12%; float:left; margin: 1%;}
#Rmenu{
	width: 12%;
	float: right;
	margin: 1%;
}
#menu{white-space: nowrap; width: 100%; }

}

@media screen and (max-width: 775px) { /*маленький*/
#BIGmenu {display:none}


body {
background: #333333;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
table {border-spacing: 7px 11px;
  border:0px;
}

td {
  padding: 10px;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
  color: #ffffff;
  background-color: #0095ff;
  border: 0px solid #0095ff;
}
a {
   white-space: nowrap;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  vertical-align: middle;
  text-align: center;
  color: #ffffff;
  font-size: 4vw;
}

canvas{
	color: #E44CE4;
	background-color: #1DAB1D;
	float: left;
	width: 99%;
	height: 100%;
	margin: 1%;
	border-radius: 10px;
	border: 0px solid #B13032;
}


#Smallmenu{white-space: nowrap; width: 100%;} }



}