JSFiddle - React, Tailwind, and code Playground

by kairavthakar2016

HTML

<div style="background-color:green; position: relative;  direction: rtl;width:fit-content;">
	<div style="position: absolute; inset: 0px;"></div>
	<div style="width: 280px; ">
		<div id="child" style="background:red;flex: 0 0 auto; width: inherit;  transform-origin: right top 0px;">
			<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>
			</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;

}