JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ololo</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
position:relative;
}
table {
width:100%;
height:100%;
border-collapse:collapse;
background:url(http://habrastorage.org/storage2/3ca/985/260/3ca9852601dba866c57acfd71fa7cb14.png), url(http://habrastorage.org/storage2/438/09a/789/43809a78999d6e0dfef3cb521b265a26.png), #fff2de;
background-position:bottom left, bottom right;
background-repeat:no-repeat;
box-shadow:#000 0px 1px 5px -2px;
}
tr:first-child > td {
background:#fffbf4;
}
tr:first-child > td {
min-height:50px;
}
tr:first-child > td:first-child {
background:url(http://habrastorage.org/storage2/2ab/488/44f/2ab48844f425c7ebdedbe10c5518e00c.png), #fffbf4;
background-position:top left;
background-repeat:no-repeat;
}
tr:first-child > td:last-child {
background:url(http://habrastorage.org/storage2/36f/6db/6ef/36f6db6ef50ec7dbd8dc9f1a9c4edaea.png), #fffbf4;
background-position:top right;
background-repeat:no-repeat;
}
td {
text-align:center;
border:#ebdcc4 1px solid;
}
td:first-child {
border-left:#ebdcc4 0px solid;
}
td:last-child {
border-right:#ebdcc4 0px solid;
}
tr:first-child > td {
border-top:#ebdcc4 0px solid;
}
tr:last-child > td {
border-bottom:#ebdcc4 0px solid;
}
/* теньки только для вебкитов, лениво под все запиливать */
div.shadow1,
div.shadow2,
div.shadow3,
div.shadow4 {
position:absolute;
width:30px;
height:30px;
box-shadow:rgba(0,0,0,0.7) 0px 0px 8px;
z-index:-1;
}
div.shadow1 {
top:4px;
left:2px;
border-radius:3px;
-webkit-transform:skewX(5deg);
}
div.shadow2 {
top:4px;
right:1px;
...