JSFiddle - React, Tailwind, and code Playground

by Yaroslav Samardak

HTML

<div class="take-photo">
  <input type="file" name="picture" accept="image/*" capture="user">
  <div class="btn">Take photo</div>
  <img src="https://placekitten.com/408/287" />
</div>

SCSS

.take-photo {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  
  input[type="file"], img {
    color: blue;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background: green;
    opacity: 0;
    cursor: pointer;
  }
  
  img {
      z-index: 8;
      opacity: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .btn {
    background: white;
    padding: 10px;
    color: black;
    width: 60%;
    margin: 0 auto;
    text-align: center;
  }
  
  &:hover .btn {
    background: darkgray;
  }
}