JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>Двойная рамка</title>
 </head>
 <body>
  <div class="gallery">
    <img src="http://htmlbook.ru/sites/default/files/river.jpg">
    <div class="ctrl_panel">
      <a href="#"></a>
      <a href="#" class="active"></a>
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
    </div>
  </div>
 </body>
</html>

CSS

.gallery {
  width: 600px;
  height: 380px;
}

.gallery img {
  display: block;
}

.ctrl_panel {
  position: relative;
  bottom: 30px;
  text-align: center;
}

.ctrl_panel a {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #000;
  border: 2px solid #fff;
  border-radius: 15px;
}

.ctrl_panel a.active {
  background: #f00;
  box-shadow: 0 0 5px 2px #fff;
}