JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en">
<head>
<title>Absolutely positioned boxes show outside their parent container styled with overflow:hidden</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
body {background:#333;font:1em Arial, Helvetica, sans-serif;}
h1 {color:#ececec;text-align:center;margin:1.5em 0 1em;}
h2 {font-weight:normal;font-size:1.15em;padding-bottom:5px;border-bottom:1px solid #999;}
p {padding-right:1em;color:#000;}
pre {font-size:1em;color:#06f;margin:1em 0;}

#wrapper {position:absolute;width:100px;height:100px;background:#ececec;overflow:hidden;zoom:1;padding:20px;border-bottom:1px solid #000;border-right:1px solid #000;border-top:1px solid #fff;border-left:1px solid #fff;}
.css {float:right;width:50%;}
.markup {float:left;width:50%;margin-right:-1px;}
.box1,
.box2,
.box3,
.box4 {background:#fff;position:absolute;padding:10px;border:1px solid #333;}
.box1 {left:0;top:-20px;}
.box2 {right:0;top:0;}
.box3 {left:0;bottom:0;}
.box4 {right:-20px;bottom:-20px;}
</style>
</head>
<body>
<h1>overflow:hidden and absolutely positioned elements</h1>
<div id="wrapper">
<div class="markup">
   
      <div class="box1">box 1</div>
        <div class="box2">box 2</div>
        <div class="box3">box 3</div>
        <div class="box4">box 4</div>
</div>
</body>
</html>