JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body">
  <div class="photo-container">
    <img src="https://images.pexels.com/photos/816608/pexels-photo-816608.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="start">
  </div>
</div>

CSS

.body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photo-container {
  width: 200px;
  position: relative;
  background: red;
}

.photo-container img {
  width: 100%;
  display: block;
}

.photo-container::after,
.photo-container::before {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  position: absolute;
}

.photo-container::after {
  border-bottom: 3px solid blue;
  border-left: 3px solid blue;
  bottom: -5px;
  left: -5px;
}

.photo-container::before {
  border-top: 3px solid blue;
  border-right: 3px solid blue;
  top: -5px;
  right: -5px;
}