JSFiddle - React, Tailwind, and code Playground

by kairavthakar2016

HTML

<div style="background-color:green; position: relative;  direction: rtl;width:fit-content;transform-origin: right top 0px;transform: matrix(0.2, 0, 0, 0.2, 0, 0);">
	<div style="position: absolute; inset: 0px;"></div>
	<div style="width: 280px;; ">
		<div id="child" style="background:red;flex: 0 0 auto; width: 1400px;  ">
			<section class="section">
				<div class="style_content container">
					<div><h1>Hello</h1></div>
					 <div><p>that is for test.that is for test.that is for test.that is for test.that is for test.
					 that is for test.that is for test.that is for test.that is for test.that is for test.that is for test.that is for test.that is for test.</p></div>
					<a href="#" target="_blank">click me</a>
				</div>
        <div class="style_content container">
					<div><h1>Hello</h1></div>
					 <div><p>that is for test.that is for test.that is for test.that is for test.that is for test.
					 that is for test.that is for test.that is for test.that is for test.that is for test.that is for test.that is for test.that is for test.</p></div>
					<a href="#" target="_blank">click me</a>
				</div>
			</section>					
		</div>
	</div>
</div>

CSS

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}
.section {
  padding: 20px 0;
  position: relative;
}
.style_content {
    color: #27272a;
    max-width: 700px;
    position: relative;
    text-align: center;
    z-index: 9;

}