JSFiddle - React, Tailwind, and code Playground
by Barbos
HTML
<div class="maincomm">
<div class="headcomm commmod">Комментарий модератора</div>
<div class="commentMessage--importantModerator commentMessage--iconic">
<div class="commblock">
<div class="nmcomm">{option}:</div>
<div>{text}</div>
</div>
</div>
</div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
1color: #fff;
text-align: center;
}
.maincomm {
background: #20262E;
background-color: #FFFFFF;
width: 95%;
margin: 5px 20px 20px;
border: 3px solid #8394B2;
width: 410px;
margin: 0 auto;
}
.headcomm {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: black;
text-align: center;
padding: 5px;
border-bottom: 1px solid #8394B2;
}
.commadm {
background-color: #FBBFBB;
}
.commmod {
background-color: rgba(65, 131, 215, 0.8);
background-image: linear-gradient(135deg, rgba(65, 131, 215, 0.2) 25%, transparent 0, transparent 50%, rgba(65, 131, 215, 0.2) 0, rgba(65, 131, 215, 0.2) 75%, transparent 0);
background-size: 30px 30px;
animation: bg-animate 5s linear infinite;
/* border-left: 5px solid #286abd; */
}
.bodycomm {
margin: 5px;
}
.commblock {
margin-left: 20px;
}
.nacomm {
font-weight: bold;
color: blue;
}
.nmcomm {
font-weight: bold;
color: red;
}
.commentMessage {
margin-bottom: 20px;
padding: 6px 10px;
color: #141414;
background: #fefefe;
border-width: 1px;
border-style: solid;
border-top-color: #dfdfdf;
border-right-color: #d8d8d8;
border-bottom-color: #cbcbcb;
border-left-color: #d8d8d8;
border-radius: 4px;
}
.commentMessage:before,
.commentMessage:after {
content: " ";
display: table;
}
.commentMessage:after {
clear: both;
}
.commentMessage.commentMessage--importantModerator {
color: #aa6709;
background: #fff4e5;
border-left: 3px...