<div class="cont">
  <p class="content">Бедная старушка находит на дороге горшок с золотом. Но пока она тащит его домой, золото превращается в серебро, серебро – в железо и так далее. Но старушка рада любой находке и не теряет оптимизма и хорошего настроения.</p>
</div>
body {
  font-family: "Oswald", sans-serif;
  background: #eee;
  padding: 40px;
}

.cont {
  background: white;
  width: 100%;
  max-width: 500px;
  padding: 30px;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.06);
}

.content {
  width: 100%;
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
  position: relative;
  font-weight: 400;
}

.content::before {
  padding: 5px 20px;
  background: #533dc4;
  color: white;
  border-radius: 4px;
  position: absolute;
  content: "Цитата";
  top: -40px;
  right: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.