JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <article>
        Text/content you'd like to lead with
    </article>
    <details>
        <summary class="button">Your 'Read More' button</summary>
        Content you'd like to appear after clicking
    </details>
</section>

CSS

.button{
    background: #333;
    padding: 5px;
    border-radius: 10px;
    color: #fff;
    max-width: 25%;
    font-weight: 800;
    text-align: center;
    outline: none;
    
    /*remove text highlighting (easy to double click and highlight)
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
    supported by Chrome and Opera */
}

details summary.button::-webkit-details-marker {
  display:none; /*remove the arrow of the details tag*/
}

details[open] summary{
  background: #666; /*change background when button is 'open'*/
}