JSFiddle - React, Tailwind, and code Playground

HTML

<div class="postit_colbox2">
    <div id="myDivdark" class="postit_stickynotethree">
        <div class="postit_pinstickynote"><img class="postit_pinimgsize" src="postit_pin.png"></div>
        
        <div class="postit_header">
        <div class="postit_logo"><img class="postit_logoplane" src="http://cdn.wallpapersafari.com/67/76/jBL6mO.jpg"></div>
        <div class="postit_h1">14:38 27/6-16</div>
        </div>
 
<div class="postit_contentboxs">
<div class="postit_leftside">
<div class="postit_p">God morgen!</div> 
<div class="postit_contenttxt">Så er den i Så er den iSå er den i</div>
</div>


<div class="postit_rightside"><!--this div shows only if image-->
<div class="postit_imageright">
<img class="postit_imageplane" src="http://cdn.wallpapersafari.com/67/76/jBL6mO.jpg">
</div>
</div>

</div>

<div class="postit_fromname">
<div class="postit_footer">
<div class="postit_from">From:</div>
<div class="postit_frombox">Sandra Hansen</div>
</div>
</div>

    </div>
</div>

CSS

/* @import url(https://fonts.googleapis.com/css?family=Indie+Flower|Shadows+Into+Light|Architects+Daughter|Gloria+Hallelujah|Covered+By+Your+Grace|Rock+Salt|Shadows+Into+Light+Two|Bad+Script|Schoolbell|Happy+Monkey);*/
.postit_contentboxs {
  width:auto;
  height:10rem;
  float:left;
  display:flex;
}
.postit_header {
  width:100%;
  height:2rem;
}
.postit_footer {
  float:right;
  width:auto;
}
.postit_logo {
    width: 9rem;
    overflow: hidden;
    float: left;
    height: 1rem;
}
.postit_logoplane {
  width:100%;
  height: auto;
}
.postit_frombox {
    float: right;
    width: auto;
    font-size: 1rem;
    padding-right:2rem;
}
.postit_rightside {
  width:auto;
  float:right;
  height:100%;
}
.postit_leftside {
  width:auto;
  height:100%;
  float:left;
}
.postit_imageplane { 
height:auto;
width: 100%;
}
.postit_imageright {
  width: 14rem;
  height: 8rem;
  overflow:hidden;
  float:right;
}
 .postit_contenttxt {
    overflow: hidden;
    max-height: 8rem;
    padding-right: 1rem;
    word-break:break-all;
    float:left;
}
   .postit_fromname {
    width: 100%;
    position: absolute;
    bottom: 7px;
   }
    .postit_from { 
width: auto;
    max-width: 4rem;
    font-size: 1rem;
    margin-right: 1rem;
    text-align: left;
    float: left;
   }
  .postit_colbox2 .postit_stickynotethree {
		height: 13rem;
    font-size:1rem;
    max-width: 26rem;
    text-align:left;
    min-width:24rem;
    right:0;
    position:absolute;
    font-family: arial;
    background: #ccc;
    font-weight: bold;
    padding:1rem;
    width:max-content;
	}
    .postit_colbox2 {
       float: left;
    max-width: 28rem;
    position: relative;
    min-width: 24rem;
    height: 18rem;
    padding: 10px 40px;
    }
        .postit_colbox2 .postit_pinimgsize {
            width: 40px;
        }
        .postit_colbox2 .postit_pinstickynote {
            position: absolute;
            left: 114px;
            align-items: center;
            float: none;
            align-content:...

JavaScript

var postitColor = ["#79F264", "#FFB000", "#E7E442", "#07AFE2", "#FF69B4"];

    var random = Math.floor((Math.random() * postitColor.length)),
        pickColor = postitColor[random];

    var postit_stickynotethree = document.querySelectorAll('.postit_stickynotethree');

    for (var c = 0; c < postit_stickynotethree.length; c++) {
        postit_stickynotethree[c].style.backgroundColor = pickColor;
    };