JSFiddle - React, Tailwind, and code Playground

by avgaltsev

HTML

<div class="popup" style="margin: 20px;">
    <h2>Привет!</h2>
    <p class="last">Я &ndash; всплывающее окно.</p>
</div>

CSS

body {
    font-family: tahoma, arial, sans-serif;
    font-size: 12px;
}

h2 {
    font-size: 18px;
}

h2, p {
    margin-bottom: 10px;
    line-height: 150%;
}

h2.last, p.last {
    margin-bottom: 0;
}

.popup {
    position: absolute;
    max-width: 400px;
    border: 1px solid #71653a;
    border-radius: 5px;
    padding: 20px;
    color: #71653a;
    background-color: #fff1be;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

.popup:before {
    content: "";
    position: absolute;
    border-left: 10px solid rgba(113, 101, 58, 0);
    border-right: 10px solid rgba(113, 101, 58, 0);
    border-bottom: 10px solid #71653a;
    left: 20px;
    top: -10px;
}

.popup:after {
    content: "";
    position: absolute;
    border-left: 10px solid rgba(255, 241, 190, 0);
    border-right: 10px solid rgba(255, 241, 190, 0);
    border-bottom: 10px solid #fff1be;
    left: 20px;
    top: -9px;
}