JSFiddle - React, Tailwind, and code Playground
by Neelansh Verma
HTML
<!DOCTYPE html>
<html>
<head>
<title>Sushi Restaurant</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<style type="text/css">
body {
font: bold 1.1em Courier;
float: left;
width: 100%;
margin:0;
}
ul {
list-style: none;
margin:0;
}
header{
float: left;
width: 100%;
padding-bottom: 2%;
}
header ul li{
width:auto;
min-width: 22%;
float:left;
border: 1px solid lightgrey;
padding:1%;
border-radius:0 0 15px 15px ;
text-align:center;
box-shadow: 0px 10px 5px #F5F5F5 inset;
font-size:16px;
}
header ul li a{
text-decoration: none;
color: #000;
}
.wrapper{
float: left;
width: 100%;
height: 400px;
}
.wrapper .info{
float: left;
width: 50%;
background-color: #f2f2f2;
padding:5% 0;
height: 100%;
}
.wrapper .info .text{
float: left;
width: 45%;
padding:5%;
font-size: 20px;
}
.wrapper .info .text p{
float: left;
margin: 0;
width: 100%;
}
.wrapper .info .text ul li{
float: left;
margin: 0;
width: 100%;
}
.wrapper .info .image{
float: left;
width: 45%;
text-align: center;
}
.wrapper .sidebar{
float: left;
width: 50%;
text-align: center;
height: 100%;
padding:5% 0;
}
.wrapper .sidebar .image{
float: left;
width: 100%;
}
.wrapper .sidebar .text{
float: left;
width: 100%;
font-size: 20px;
}
.wrapper .sidebar .text p{
float: left;
margin: 0;
width: 100%;
}
.wrapper .sidebar .text ul li{
float: left;
margin: 0;
width: 100%;
}
@media only screen and (max-width : 1000px){
.wrapper .info{
width: 100%;
}
.wrapper .sidebar{
width: 100%;
}
}
...