JSFiddle - React, Tailwind, and code Playground

HTML

<div class="service">
  <div class="service__inner">
    <h4 class="service__title">Lorem ipsum dolor</h4>
    <p class="service__text">Eos sed autem aspernatur ullam totam quod deleniti, corrupti incidunt. Et, ab magni minus non ullam at deserunt quasi, tempore. Natus sit assumenda, delectus tempore et sint ex, quae nam suscipit possimus excepturi! Nobis minus in iste iure fugit
      voluptatum, velit soluta, placeat nostrum excepturi veritatis temporibus vitae obcaecati commodi culpa reprehenderit adipisci, atque. Officia?</p>
    <div class="service__action-wrap">
      <button class="service__action">Click me!</button>
    </div>
  </div>
</div>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.5)),
    url('https://source.unsplash.com/E1GqYJFnXoU/900x900');
  background-size: cover;
  background-position: center;
  font-family: sans-serif;
  padding: 25px;
  color: #fff;
}

.service {
  position: relative;
  padding: 0 25px;
  text-align: center;
}

.service::before,
.service::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  width: 25px;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.service::before {
  left: 0;
  border-right-color: transparent;
  border-radius: 25px 0 0 25px;
}

.service::after {
  right: 0;
  border-left-color: transparent;
  border-radius: 0 25px 25px 0;
}

.service__inner {
  display: flex;
  flex-direction: column;
}

.service__title {
  display: flex;
  font-size: 2rem;
  line-height: 1;
  margin-top: -1rem;
  margin-bottom: 1rem;
}

.service__title::before,
.service__title::after {
  content: '';
  flex: 1;
  height: 2px;
  margin-top: 1rem;
  background-color: rgba(255, 255, 255, 0.5);
}

.service__title::before {
  margin-right: 1.5rem;
}

.service__title::after {
  margin-left: 1.5rem;
}

.service__text {
  margin-top: 0;
}

.service__action-wrap {
  display: flex;
  height: 2rem;
  margin-bottom: -1rem;
}

.service__action-wrap::before,
.service__action-wrap::after {
  content: '';
  flex: 1;
  height: 2px;
  align-self: flex-end;
  margin-bottom: 1rem;
  background-color: rgba(255, 255, 255, 0.5);
}

.service__action-wrap::before {
  margin-right: 1.5rem;
}

.service__action-wrap::after {
  margin-left: 1.5rem;
}

.service__action {
  background-color: #911b35;
  border: none;
  border-radius: 5px;
  padding: 0 1.5em;
  color: inherit;
  font-size: inherit;
}