JSFiddle - React, Tailwind, and code Playground

by rexonms

HTML

<div id="component-268065" class="component-container component-class-slideshow "><div class="component-slideshow has-captions">
	<div class="slideshow-slider hover-show-arrows" style="height: 400px; line-height: 400px;">
					<img class="tallest-img" src="https://cdn.fedweb.org/cache/fed-34/2/18013-10_EVENTS_FromStrengthtoStrength_AN19_Homepage_Slideshow_Banner_496841_resize_1524_1143_1_1.png">
				<div class="flexslider flexslider-9609077cd5ba481e40002528f07846ce" data-slideshow="9000">
			<ul class="slides">
									<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;" class="flex-active-slide">
						<div class="slide-container">
															<a href="https://cjp.fedwebpreview.org" target="_self">
															<img class="centered-img" src="https://cdn.fedweb.org/cache/fed-34/2/18013-10_EVENTS_FromStrengthtoStrength_AN19_Homepage_Slideshow_Banner_496841_resize_1524_1143_1_1.png" alt="" title="">
							</a>
							<label class="indicator" style="visibility: visible;"></label>
						</div>
					</li>
									<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class="">
						<div class="slide-container">
															<a class="no-link">
															<img class="centered-img" src="https://cdn.fedweb.org/cache/fed-34/2/18282_MKTG_Janower_Homepagebanner_AN19%25281%2529_496842_resize_1524_1143_1_1.png" alt="" title="">
							</a>
							<label class="indicator" style="visibility: visible;"></label>
						</div>
					</li>
									<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class="">
						<div class="slide-container">
															<a class="no-link">
															<img class="centered-img" src="https://cdn.fedweb.org/cache/fed-34/2/18354_MKTG_HurricaneMichael_AN19_Banners_Homepage_496843_resize_1524_1143_1_1.png" alt="" title="">
							</a>
							<label class="indicator" style="visibility:...

CSS

.designOveride p {
    font-family: 'Gotham', sans-serif;
    font-style: normal;
}

.designOveride .component-slideshow .flexslider {
    margin: 0;
    background-color: #000;
}

JavaScript

document.addEventListener("DOMContentLoaded", function(event) {
  const divId = "component-268065";
    try {
      const element = document.getElementById(divId);
      const overrideClassName = 'designOveride';
      element.classList.add(overrideClassName);
    } catch (error) {
     console.log('Oh no! something went wrong. Is the "divId" variable updated with ".component-container" div id?',error)
    }
});