JSFiddle - React, Tailwind, and code Playground

by rayneb

HTML

<div class="aholder">
<div class="announcement">
  <div id="announcement1">
    <div id="announcement-title">
      member groups
    </div>

    <div id="announcement-date-text">

      february 20, 2022
    </div>




      <div id="announcement-main-text">
<help>
        <p>That's what painting is all about. It should make you feel good when you paint. This is unplanned it really just happens. For the lack of a better word I call them hangy downs.</p>

        <p>Trees live in your fan brush, but you have to scare them out.</p>

      
        
        <p>The only prerequisite is that it makes you happy. If it makes you happy then it's good. Van Dyke Brown is a very nice brown, it's almost like a chocolate brown. Let all these things just sort of happen. You can do anything your heart can imagine. This is a fantastic little painting. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush.</p>
<p>The only prerequisite is that it makes you happy. If it makes you happy then it's good. Van Dyke Brown is a very nice brown, it's almost like a chocolate brown. Let all these things just sort of happen. You can do anything your heart can imagine. This is a fantastic little painting. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush.</p>
<p>The only prerequisite is that it makes you happy. If it makes you happy then it's good. Van Dyke Brown is a very nice brown, it's almost like a chocolate brown. Let all these things just sort of happen. You can do anything your heart can imagine. This is a fantastic little painting. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush.</p>
<p>The only prerequisite is that it makes you happy. If it makes you happy then it's good. Van Dyke Brown is a very nice brown, it's almost like a chocolate brown....

CSS

.aholder {
  width: 580px;
height: auto;
  position: sticky;
overflow: hidden;

}

.announcement {
  height: 500px;
  width: 560px;
  background: #e0e0e0;
  position: relative;
  border: 1px solid #ccc;
  z-index: 9991;
}

#announcement1 {
  height: 190px;
  width: 560px;
  background: url(https://img.nickpic.host/uuYG5f.png);
  position: relative;
  z-index: 9991;

}

#announcement1::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 70px 560px;
  border-color: transparent transparent #e0e0e0 transparent;
  content: "";
  position: absolute;
  top: 120px;
  left: 0;
  z-index: 9991;
}


#announcement-title {
  color: #aaa;
  text-transform: lowercase;
  transform: rotate(-7deg);
  font-size: 60px;
  font-family: springtime;
  padding-top: 65px;
  text-align: center;
  z-index: 9991;

}

#announcement-date-text {
  color: #aaa;
  text-transform: lowercase;
  transform: rotate(-7deg);
  font-size: 20px;
  text-align: right;
  padding-left: 320px;
  padding-top: 130px;
  z-index: 99960;
  position: absolute;
}



#announcement-main-text::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 60px 500px;
  border-color: transparent transparent #fefefe transparent;
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  z-index: 9991;
 
}
#announcement-main-text {
  
  padding: 10px 10px 1000px 10px;
  text-align: justify;
  width: 480px;
  left: 40px;
  position: relative;
  top: 140px;
  background: #fefefe;
  height: 100%;
padding-bottom: 100px;
  margin-bottom: 100px;
  
}

help {
  color: #aaa;
  text-transform: lowercase;
  font-size: 12px;
  text-align: justify;
  width: 480px;
  height: 100%;
  left: 40px;
  position: sticky;
padding-bottom: 100px;
  margin-bottom: 100px;
}