JSFiddle - React, Tailwind, and code Playground

HTML

<form class="newsletter__form" action="#" method="GET" enctype="multipart/form-data">
    <div class="newsletter__border">
      <input id="newsletter-checkbox" type="checkbox" class="newsletter__checkbox" name="newsletter__input">
      <label for="newsletter-checkbox" class="newsletter__label"></label>
    </div>

CSS

.newsletter__label::before {
  transition: background .2s ease-in;
  content: "";
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid #3a173c;
  margin-bottom: .875rem;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");
}









/* Add your styles here */

@import url(https://fonts.googleapis.com/css?family=Roboto:regular&display=swap);
@font-face {
  font-family: RobotoRegular;
  font-display: swap;
  src: url(../fonts/RobotoRegular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal
}
:root {
  --headerHight: 5.625rem;
  --headerHightMobile: 3.75rem;
  --fontFamilyIconsFont: "IconsFonts";
  --fnSectionCouch: #C0B9B5;
  --bgSubmainColor: #E0DCDB;
  --bgButtonLearMore: #B9E2BF;
  --bgHoverButtonLearMore: #E1DDDC;
  --bgRectangleItem: #E1DDDC;
  --name1: #BEBAB6;
  --name2: #E5DEDB;
  --name4: #E1DDDC
}
* {
  padding: 0;
  margin: 0;
  border: 0
}
*,
*::after,
*::before {
  box-sizing: border-box
}
*::after,
*::before {
  display: inline-block
}
body,
html {
  height: 100%;
  min-width: 320px
}
body {
  color: #3a173c;
  line-height: 1;
  font-family: Roboto;
  font-size: 1.125rem;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
button,
input,
textarea {
  font-family: Roboto;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background-color: rgba(0,0,0,0)
}
label {
  display: inline-block
}
button,
option,
select {
  cursor: pointer
}
a {
  display: inline-block;
  color: inherit;
  text-decoration: none
}
ul li {
  list-style: none
}
img {
  vertical-align: top
}
b,
h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: inherit;
  font-size: inherit
}
address,
em,
i {
  font-style: normal
}
img {
  vertical-align: top
}
button,
input,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height:...