JSFiddle - React, Tailwind, and code Playground

HTML

<div id='section_4'>
		<div id='latest_news'>
			<p id='latest_news_text'>LATEST NEWS</p>
		</div>
		<div id='section_4_row_1'>
			<div id='double_wide_image'></div>
			<div class='section_4_module top'>
				<div class='section_4_module_icon'>
				</div>
				<div class='section_4_module_text'>
					<p class='text_1'>Job, Music</p>
					<p class='text_2'>Fields of gold</p>
					<p class='text_3'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
					<p class='text_4'>Continue reading...</p>
				</div>
			</div>
			<div class='section_4_module top'>
				<div class='section_4_module_icon'>
				</div>
				<div class='section_4_module_text'>
					<p class='text_1'>Job, Music</p>
					<p class='text_2'>Fields of gold</p>
					<p class='text_3'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
					<p class='text_4'>Continue reading...</p>
				</div>
			</div>
		</div>
</div>

CSS

#section_4 {
  text-align: center;
  padding-bottom: 2em;
  padding-top: 6em; }
  #section_4 #latest_news {
    width: 120px;
    height: 20px;
    display: inline-block;
    float: none !important;
    border-bottom: 2px solid #E1E1E1;
    padding-bottom: 1.2em;
    margin-right: 1em; }
  #section_4 #latest_news_text {
    font-size: 16px;
    font-weight: bold;
    font-family: Montserrat;
    font-weight: bolder; }
  #section_4 #section_4_row_1 {
    height: 340px; }
  #section_4 #section_4_row_1,
  #section_4 #section_4_row_2 {
    text-align: center;
    margin-top: 2em; }
  #section_4 #section_4_row_2 {
    padding-right: 2.3em;
    margin-top: 1em; }
  #section_4 #double_wide_image {
    background-color: black;
    width: 460px;
    height: 340px;
    display: inline-block;
    border-radius: 8px; }
  #section_4 .section_4_module {
    display: inline-block;
    height: 340px;
    border-width: 2px;
    border-style: solid;
    border-radius: 14px;
    border-color: #F3F3F3;
    margin-left: 2em;
    padding-bottom: 1em;
    margin-top: 1em; }
  #section_4 .top {
    position: relative;
    top: 50%;
    transform: translateY(-50%); }
  #section_4 .section_4_module_icon {
    background-color: black;
    height: 180px;
    width: 210px;
    border-radius: 8px; }
  #section_4 .section_4_module_text {
    text-align: left;
    width: 200px; }
  #section_4 .text_1 {
    color: #C0C0C0;
    margin-top: 0.8em;
    margin-left: 0.5em;
    font-family: Open Sans;
    font-size: 12px; }
  #section_4 .text_2 {
    font-family: Montserrat;
    font-weight: bolder;
    font-size: 16px;
    margin-left: 0.3em; }
  #section_4 .text_3 {
    font-family: Open Sans;
    font-size: 12px;
    line-height: 18px;
    margin-left: 0.5em; }
  #section_4 .text_4 {
    font-family: Open Sans;
    font-size: 12px;
    font-style: italic;
    margin-left: 0.5em;
    font-weight: bold !important; }