JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<div class="swirl">
</div>
<div class="a">
</div>
<div class="box">
</div>
<section class="frame1">
<p>
The sun dipped below the horizon, casting a warm golden hue across the landscape, as the gentle breeze whispered through the leaves, creating a symphony of rustling sounds that wrapped the evening in a sense of tranquility.
</p>
<div class="line"></div>
<p>
As the vibrant colors of the sky blended into shades of pink and purple, the serene atmosphere invited thoughts of reflection and gratitude, reminding all who witnessed this daily spectacle of the beauty inherent in nature and the fleeting moments of life.
</p>
<p>
With each sunset, there was a promise of renewal and possibility, a moment to pause and appreciate the simple yet profound gifts that each day had to offer, urging one to embrace the present while looking forward to the dawn of a new day.
</p>
<p>
The sun dipped below the horizon, casting a warm golden hue across the landscape, as the gentle breeze whispered through the leaves, creating a symphony of rustling sounds that wrapped the evening in a sense of tranquility.
</p>
<p>
As the vibrant colors of the sky blended into shades of pink and purple, the serene atmosphere invited thoughts of reflection and gratitude, reminding all who witnessed this daily spectacle of the beauty inherent in nature and the fleeting moments of life.
</p>
<p>
With each sunset, there was a promise of renewal and possibility, a moment to pause and appreciate the simple yet profound gifts that each day had to offer, urging one to embrace the present while looking forward to the dawn of a new day.
</p>
</section>
<section class="frame1">
<p>
Although there are MCTs in coconut oil, coconut oil isn't the same as MCT oil. MCT oil is easier to digest and more easily absorbed than coconut oil.
</p>
<p>
Although there are MCTs in coconut oil, coconut oil isn't the same as MCT oil. MCT oil is easier to digest and more easily absorbed than coconut...CSS
body {padding:40px; background:#ffffff;color:#222222;}
/* Dark
body {padding:40px; background:#202123;color:#dedede;}
*/
.frame1 {padding:30px;position:relative;margin:0 0 40px 0;background-image: linear-gradient(to bottom right,rgba(255,0,0,0.2), rgba(237,153,26,0.2) 10%, rgba(255,0,0,0) 30%, rgba(255,0,0,0) 70%, rgba(237,153,26,0.2) 90%, rgba(255,0,0,0.2) 100%);}
.frame1::before {content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;
clip-path: polygon(100% 0, 100% 2px, 2px 2px, 2px 100%, 0 100%, 0% 0%);
background-image: linear-gradient(to bottom right,rgba(255,0,0,1), rgba(237,153,26,1) 10%, rgba(255,0,0,0) 30%, rgba(255,0,0,0) 100%);}
.frame1::after {content:"";position:absolute;bottom:0;right:0;display:block;width:100%;height:100%;
clip-path: polygon(100% 0, 100% 2px, 2px 2px, 2px 100%, 0 100%, 0% 0%);
background-image: linear-gradient(to bottom right,rgba(255,0,0,1), rgba(237,153,26,1) 10%, rgba(255,0,0,0) 30%, rgba(255,0,0,0) 100%);
rotate: 180deg;}
.line {width:100%;height:2px;background-image: linear-gradient(to right,rgba(255,0,0,1), rgba(237,153,26,1) 30%, rgba(255,0,0,0) 60%, rgba(255,0,0,0) 100%);}
.box {clip-path: polygon(0 0, 20px 0, 25px 2px, 80px 2px, 85px 0, 100% 0, 100% 2px, 85px 2px, 80px 4px, 25px 4px, 20px 2px, 2px 2px, 2px 20px, 4px 25px, 4px 80px, 2px 85px, 2px 100%, 0 100%, 0 85px, 2px 80px, 2px 25px, 0 20px);
width:300px;height:100px;background-color:red;}
.a {width:300px;height:300px;background-color:red;
clip-path: polygon(0 100%, 32% 0, 66% 0, 100% 100%, 75% 100%, 68% 74%, 30% 74%, 39% 55%, 64% 55%, 60% 28%, 45% 29%, 26% 100%);}
.swirl {width:300px;height:300px;background-color:red;
clip-path: polygon(45% 50%, 53% 50%, 52% 41%, 32% 41%, 34% 66%, 74% 65%, 71% 26%, 16% 25%, 17% 81%, 86% 84%, 88% 13%, 0 10%, 0 100%, 100% 100%, 100% 0, 0 0, 0 7%, 93% 7%, 94% 91%, 9% 91%, 7% 17%, 81% 18%, 80% 76%, 24% 74%, 23% 32%, 61% 33%, 63% 57%, 37% 59%, 36% 46%, 45% 43%);}