JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Logo</title>
<style type="text/css">
body {
padding-top: 236px;
padding-right: 2px;
}
#html5-logo {
bottom: 0;
height: 385px;
left: 0;
margin: auto;
padding-left: 1px;
position: relative;
right: 0;
top: 0;
width: 337px;
}
#background {
background: rgb(227, 76, 38);
height: 100%;
width: 100%;
}
#background-left-edge {
border-top: 346px solid rgb(227, 76, 38);
border-left: 31px solid white;
border-right: 0px solid;
border-bottom: 0px solid;
bottom: 0;
height: 346px;
left: 0;
position: absolute;
top: 0;
width: 32px;
}
#background-right-edge {
border-top: 346px solid rgb(227, 76, 38);
border-right: 31px solid white;
border-left: 0px solid;
border-bottom: 0px solid;
bottom: 0;
height: 346px;
right: 0;
position: absolute;
top: 0;
width: 31px;
}
#background-bottom-edge {
border-top: 39px solid transparent;
border-right: 139px solid white;
border-left: 138px solid white;
border-bottom: 0px solid;
bottom: 0;
height: 0px;
left: 31px;
position: absolute;
width: 0px;
}
#shine {
background-color: rgb(240, 101, 41);
border-top: 296px solid rgb(240, 101, 41);
border-left: 112px solid rgb(240, 101, 41);
border-bottom: 31px solid rgb(227, 76, 38);
border-right: 26px solid rgb(227, 76, 38);
height: 0px;/*295px;*/
left: 169px;
position: absolute;
top: 28px;
width: 0px;/*113px;*/
}
#text-left-background {
position: absolute;
left: 63px;
top: 71px;
height: 0px;
width: 0px;
background-color: rgb(235, 235, 235);
border-left: 19px solid rgb(227, 76, 38);
border-right: 87px solid rgb(235, 235, 235);
border-bottom: 24px solid rgb(227, 76, 38);
border-top: 216px solid rgb(235, 235, 235);
}
#text-right-background {
position: absolute;
left: 169px;
top: 71px;
...