JSFiddle - React, Tailwind, and code Playground

by Pearlin Lawrence

HTML

<body class="home page page-id-140 page-parent page-template page-template-homepage-php">
    <div id="wrapper">
        <div class="sidebar">	<a href="http://www.goodfootdelivery.com"> <img src="http://www.goodfootdelivery.com/wp-content/themes/goodfoot/images/sidelogo.gif" width="252" height="376" border="0" /></a>

            <br />
            <br />
            	<h1>Who we are and what we do</h1>

            <p>Good Foot provides a personalized point-to-point delivery service on foot or via public transit as well as employment opportunities to people with developmental disabilities. We are a social enterprise and registered charity.</p>
            <p>By supporting Good Foot you are supporting an environmentally-friendly delivery service and helping members of your community get a foothold on independence.</p>
            <p align="center">	<span class='st_facebook_large' displayText='Facebook'></span>

<span class='st_twitter_large' displayText='Tweet'></span>

<span class='st_linkedin_large' displayText='LinkedIn'></span>

<span class='st_pinterest_large' displayText='Pinterest'></span>

<span class='st_googleplus_large' displayText='Google +'></span>

<span class='st_email_large' displayText='Email'></span>	
            </p>
            <br />
            <div id="header">
                <div id="socialMediaBox">
                    <div id="logos">	<a href="http://twitter.com/Good_Foot" id="logo-twitter"><img src="http://www.goodfootdelivery.com/wp-content/themes/goodfoot/images/logo_twitter.png" /></a>		<a href="http://www.facebook.com/GoodFootDelivery" id="logo-facebook"><img src="http://www.goodfootdelivery.com/wp-content/themes/goodfoot/images/logo_facebook.png" /></a>	
                    </div>
                    <div id="socialContent">
                        <img id="whiteArrow" src="http://www.goodfootdelivery.com/wp-content/themes/goodfoot/images/white_arrow.gif" />
                        <div id="socialText">
                           ...

CSS

body {
    text-align: center;
}

JavaScript

var txt = document.body.firstElementChild;
alert("Welcome to Good Foot Delivery: " + " " + txt.querySelector("p").textContent);

var wrapper = document.getElementById("wrapper");
alert(wrapper.querySelector("h1").textContent);

var goodFoot = document.querySelector("#container");
alert(goodFoot.querySelector("p").textContent);

var topic = document.getElementsByTagName('h4');
for (var i = 0; i < topic.length; i++) {
    alert(topic[i].textContent);

}
if (document.querySelector) {
    var outerdiv = document.querySelector('.sidebar');
    outerdiv.onmouseover = function () {
        this.querySelector('a').style.background = "yellow";
    };
    outerdiv.onmouseout = function () {
        this.querySelector('a').style.background = "silver";
    };
}