JSFiddle - React, Tailwind, and code Playground

by Kim Ara

HTML

<div class="container">
  <div class="pin">
    <svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
      <path d="
        M11 138
        a 94 94 0 1 1 170 0
        l ‑85 150
        l ‑85 ‑150
      " fill="white" stroke="black" stroke‑width="2" stroke‑opacity="0.9" opacity="0.9" />
    </svg>
  </div>
  <div class="overlay">
    Content
  </div>
</div>
<div class="container" style="‑‑top:50px;‑‑left:5px;‑‑radius:30px;">
<div class="pin">
    <svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
      <path d="
        M11 138
        a 94 94 0 1 1 170 0
        l ‑85 150
        l ‑85 ‑150
      " fill="white" stroke="black" stroke‑width="2" stroke‑opacity="0.9" opacity="0.9" />
    </svg>
  </div>
  <div class="overlay" >
    Content
  </div>
</div>

<div class="container" style="‑‑top:50px;‑‑left:5px;‑‑radius:30px;">
<div class="pin">
    <svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
      <path d="
        M11 138
        a 94 94 0 1 1 170 0
        l ‑85 150
        l ‑85 ‑150
      " fill="white" stroke="black" stroke‑width="2" stroke‑opacity="0.9" opacity="0.9" />
    </svg>
  </div>
  <div class="overlay" >
    Content
  </div>
</div>
<div class="container" style="‑‑top:50px;‑‑left:50px;‑‑radius:40px;">
<div class="pin">
    <svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
      <path d="
        M11 138
        a 94 94 0 1 1 170 0
        l ‑85 150
        l ‑85 ‑150
      " fill="white" stroke="black" stroke‑width="2" stroke‑opacity="0.9" opacity="0.9" />
    </svg>
  </div>
  <div class="overlay" >
    Content
  </div>
</div>
<div class="container" style="‑‑top:50px;‑‑left:120px">
<div class="pin">
    <svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
      <path d="
        M11 138
        a 94 94 0 1 1 170 0
        l ‑85 150
        l ‑85 ‑150
      " fill="white"...

CSS

.container {
  width: 200px;
  height: 120px;
  background: linear‑gradient(red,yellow);
  display: inline‑block;
  vertical‑align:top;
  position: relative;
  ‑‑top: ‑3px;
  ‑‑left: 35px;
  ‑‑radius: 24px;
}
.pin {
  position:absolute;
  text‑align:center;
  border: 1px solid white;
  width: calc(2*var(‑‑radius));
  height: calc(2*var(‑‑radius));
  border‑radius: 50%;
  top: calc(40px + var(‑‑top));
  left: calc(25px + var(‑‑left));
  transform: translate(‑50%, ‑50%);/*to keep the same origin*/
}
svg {
 margin‑top:10px;
}
.overlay {
  position: absolute;
  left: 25px;
  top: 40px;
  ‑webkit‑mask‑image: radial‑gradient(circle at var(‑‑left) var(‑‑top),     transparent 0, transparent var(‑‑radius), black var(‑‑radius));
  background: linear‑gradient(yellow,blue);
  padding: 12px;
  padding‑top: 30px;
}

.overlay:before {
  content: '';
  position: absolute;
  border‑radius: 50%;
}