<div class="wrapper">
<h3>Style Normal</h3>
<div class="notes">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu
nisl ante. Nullam fringilla, urna quis ultricies ultrices, est dui
eleifend libero, in consectetur eros arcu vitae risus. Ut at lectus
magna. Pellentesque consectetur risus varius libero pellentesque luctus.
Pellentesque a mi eu neque ullamcorper congue. Cras vulputate erat vitae
hendrerit ultrices. Proin libero lacus, pulvinar vitae lacus eget,
bibendum viverra purus. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Aenean interdum mauris vitae feugiat mollis.
</div>
<br />
<h3>Style 1</h3>
<div class="notes2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu
nisl ante. Nullam fringilla, urna quis ultricies ultrices, est dui
eleifend libero, in consectetur eros arcu vitae risus. Ut at lectus
magna. Pellentesque consectetur risus varius libero pellentesque luctus.
Pellentesque a mi eu neque ullamcorper congue. Cras vulputate erat vitae
hendrerit ultrices. Proin libero lacus, pulvinar vitae lacus eget,
bibendum viverra purus. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Aenean interdum mauris vitae feugiat mollis.
</div>
<br />
<h3>Style 2</h3>
<div class="notes3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu
nisl ante. Nullam fringilla, urna quis ultricies ultrices, est dui
eleifend libero, in consectetur eros arcu vitae risus. Ut at lectus
magna. Pellentesque consectetur risus varius libero pellentesque luctus.
Pellentesque a mi eu neque ullamcorper congue. Cras vulputate erat vitae
hendrerit ultrices. Proin libero lacus, pulvinar vitae lacus eget,
bibendum viverra purus. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Aenean interdum mauris vitae feugiat mollis.
</div>
<br />
<h3>Style 3</h3>
<br />
<div class="notes4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu
nisl ante. Nullam fringilla, urna quis ultricies ultrices, est dui
eleifend libero, in consectetur eros arcu vitae risus. Ut at lectus
magna. Pellentesque consectetur risus varius libero pellentesque luctus.
Pellentesque a mi eu neque ullamcorper congue. Cras vulputate erat vitae
hendrerit ultrices. Proin libero lacus, pulvinar vitae lacus eget,
bibendum viverra purus. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Aenean interdum mauris vitae feugiat mollis.
</div>
<br /><br />
<h3>Style 4</h3>
<br />
<div class="notes5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu
nisl ante. Nullam fringilla, urna quis ultricies ultrices, est dui
eleifend libero, in consectetur eros arcu vitae risus. Ut at lectus
magna. Pellentesque consectetur risus varius libero pellentesque luctus.
Pellentesque a mi eu neque ullamcorper congue. Cras vulputate erat vitae
hendrerit ultrices. Proin libero lacus, pulvinar vitae lacus eget,
bibendum viverra purus. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Aenean interdum mauris vitae feugiat mollis.
</div>
</div>
.wrapper{
width:100%;
padding: 20px;
font-family: poppins;
box-sizing: border-box;
}
/* Normal */
.notes {
position: relative;
width: 100%;
padding: 1.2em 1.4em;
margin: 1em auto;
color: #3a3429;
background: #f3dfba;
overflow: hidden;
line-height: 1.5em;
box-sizing: border-box;
}
.notes2 {
position: relative;
width: 100%;
padding: 1.2em 1.4em;
margin: 1em auto;
color: #3a3429;
background: #f3dfba;
overflow: hidden;
line-height: 1.6em;
box-sizing: border-box;
}
.notes2:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fefefe #fefefe #cdba95 #cdba95;
background: #cdba95;
box-shadow: 0 1px 1px rgb(0 0 0 / 30%), -1px 1px 1px rgb(0 0 0 / 20%);
display: block;
width: 0;
}
.notes2:hover:before {
display: none;
}
.notes3 {
line-height: 30px;
position: relative;
background-color: #29323c;
color: white;
margin: 35px 0 15px 15px;
padding: 20px 28px 15px 35px;
position: relative;
border-left: 6px solid #0a3a73;
border-radius: 0 0 3px 3px;
box-sizing: border-box;
}
.notes3:before {
content: "";
background: orange
url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z' fill='%23fff'/%3E%3C/svg%3E")
center / 30px no-repeat;
width: 3rem;
height: 3rem;
position: absolute;
border-radius: 100px;
box-shadow: inset 0 0 0 99999px rgb(255 255 255 / 25%);
transition: background-color 0.2s ease;
left: -28px;
top: -18px;
}
.notes4 {
position: relative;
padding: 20px 30px 20px 50px;
background-color: #e1f5fe;
color: #01579b;
line-height: 1.5em;
border-radius: 2px;
}
.notes4:before {
content: "";
position: absolute;
left: 18px;
top: 23px;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301579b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/><line x1='4' y1='22' x2='4' y2='15'/></svg>") center / 20px no-repeat;
}
.notes5{
padding: 16px 24px;
border-radius: 4px;
display: block;
line-height: 30px;
color: rgba(37,38,94,.7);
margin-bottom: 16px;
background: #f8faff;
border: 1px solid #d3dce6;
border-left: 4px solid #0556f3;
border-radius: 4px;
}
HTML
CSS
JS