JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button email" data-class="email">Email button</div>
<div class="button phone" data-class="phone">Phone button</div>
<div class="button twitter" data-class="twitter">Twitter button</div>
<div class="button about" data-class="about">About button</div>

<div class="content homepage-content">
    <p>Professional Sign Language Interpreting, Consultancy, and Logistics</p>
</div>

CSS

.button {
    padding: 20px;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background: red;
    display: inline-block;
    cursor: pointer;
}

JavaScript

var texts = {
    default: 'Professional Sign Language Interpreting, Consultancy, and Logistics',
    email: 'Email text',
    phone: 'Call us +11111111111',
    twitter: 'Twitter adfa df asd',
    about: 'About us text here'
},
$text = $('.content p');
$('.button').on('mouseover click', function () {
    $text.text(texts[$(this).data('class')]);
})
.on('mouseout', function() {
    $text.text(texts.default);
});