JSFiddle - React, Tailwind, and code Playground

by nukeboy212

HTML

<body>
<div style = 'display: inline-block;'>


    <div class="div1" >
    <img class="phone" src="https://i.imgur.com/a347wxT.png" alt="">
    <h3 class="call"> Call us </h3>
    <h3 class="number"> +61 3 9639 0543</h3>
    </div>
    <a href="https://www.lonsdaleinstitute.edu.au/">
    <img class="logo" src="https://www.lonsdaleinstitute.edu.au/wp-content/uploads/2019/10/Asset-12.png" alt="">
    </a>
<hr>
<div class="enquire1">
    <h1>The opportunity for a first class education, in a world-class city?</h1>
    <h3>Lansdale Institute in Melbourne, Australia offers all this and more.</h3>
    <p>Your days as a student should be some of the best of your life, filled with great memories of the lifelong friends you made, the fun times you had, and of course the many things you learnt along the way.</p>
    <p>That's why it's important to find a college where a healthy study/life balance is a real focus and your time spent in the classroom is a fullfilling as your time spent outside it.</p>
    <p>And that's where Melbourne's Lansdale Istitute is different</p>
</div>
</div>

<div class="enquire2" style = "display: inline-block;">
    <h2>Enquire Now</h2>
    <p>Save $200 on our Enrolment fee</p>
    <form>
        <label for="username">First Name</label>
        <input type="username" placeholder="John" required>
<div>
    <label for="username">Phone Number</label>
    <input type="username" placeholder="Your Number" required>
</div>
        <label for="username">Email:</label>
        <input type="email" placeholder="your email" required>
<div>
        <label for=birthday>Course</label>
        <select name="Course">
            <option value="Course">Choose your Course</option>
            <option value="English">English</option>
            <option value="Healthcare">Healthcare</option>
            <option value="IT">IT</option>
            <option value="Engineering">Engineering</option>
        </select>
</div>
<input...

CSS

body{
    font-family: 'Source Sans Pro', sans-serif;
    background-image: url(https://i.imgur.com/qS3SkhD.png);
    background-color: #cccccc;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
}
.call{
    position: absolute;
    right: 400px;
    font-size: 30px;
}
.number{
    position: absolute;
    right: 100px;
    font-size: 30px;
}

.phone{
    position: absolute;
    right: 300px;
    height: 90px;
}
.logo{
    position: relative;
    left: 1px;
    height: 90px;
    margin-inline-start: 100px;
}
.enquire1 h1{
    font-size: 2rem;
    margin-inline-start: 300px;
    margin-inline-end: 1300px;
  
    margin-block-start: 4em;
    margin-block-end: 1em;
    margin-top: 2cm;
}
.enquire1 h3{
    font-size: 1.2rem;
    margin-inline-start: 300px;
    margin-inline-end: 1300px;
   
    margin-block-start: 4em;
    margin-block-end: 1em;
}
.enquire1 p{
    display: block;
    margin-block-start: 4em;
    margin-block-end: 1em;
    margin-inline-start: 300px;
    margin-inline-end: 1300px;
    margin-bottom: 2cm;
}
.enquire2{
    text-align: right;
    margin-block-start: 4em;
    margin-block-end: 1em;
    margin-inline-start: 300px;
    margin-inline-end: 600px;
    margin-bottom: 2cm;
}