JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Features -->
		<section class="features">
			<div class="features__wrapper">
				<div class="features__item">
					<span class="item__title">Audience<br>Insights</span>
					<p>Know how you perform against your category and competitors.</p>
					<a href="javascript:void(0)" class="btn btn--light">Learn more</a>
				</div>			
				
				<div class="features__item">
					<span class="item__title">Competitive<br>Benchmarking</span>
					<p>Know how you perform<br>against your category<br>and competitors.</p>
					<a href="javascript:void(0)" class="btn btn--light">Learn more</a>
				</div>			
				
				<div class="features__item">
					<span class="item__title">Actionable<br>Insights</span>
					<p>Know how you perform against your category and competitors.</p>
					<a href="javascript:void(0)" class="btn btn--light">Learn more</a>
					</div>
			</div>
		</section>
		<!-- /.features -->

CSS

* ----------------------------------------------------------------------------------------
 */
/* Settings */
/**
 * ----------------------------------------------------------------------------------------
 * Global config
 * ----------------------------------------------------------------------------------------
 */
/* Colors */
/*
 * -----------------------------------------------------------------
 * Utilities
 * -----------------------------------------------------------------
 */
/* Bootstrap */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

/* Base */
/**
 * ----------------------------------------------------------------------------------------
 * Base styles.
 * ----------------------------------------------------------------------------------------
 */
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  line-height: 1.6666666667;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  letter-spacing: 0.0388888889em;
}

ul {
  margin: 0;
  padding: 0;
}

h1 {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 3.8888888889em;
  letter-spacing: -0.0555555556em;
  line-height: 1.0285714286;
  margin-bottom:...

JavaScript

$( ".features__item" ).hover(function() {
  $( this ).toggleClass("features__item--hovered");
  $( this ).siblings().toggleClass("features__item--small");
});