JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html5>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 id=image-title>This is My Chocolate Lab, Her Name is Zoe!</h1>
<img id="Zoe" src="Images\Zoe.jpg"
  alt="Dog laying on her back with her tongue hanging out while smiling">
  </body></html>

CSS

#image-title {
  position: relative;
  top: 75px;
  font-size: 35px;
  text-align: center;
  left: 15px;
  color: rgb(0,0,0)
}
#Zoe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: 200px;
{
@media only screen (min-width : 320px) and (max-width : 568px) 
  #Zoe {
    display: block;
    text-align: center;
}
#zoe-pic-text {
  display: center;
  font-size: 15px;
  text-align: center;
  color: rgb(255, 253, 208)
}

body {
  background-color: rgb(45, 22, 6)
}
.headings {
  font-size: 30px;
  text-align: center;
  color: rgb(255, 253, 208)
}
.headings1 {
  position: relative;
  bottom: 15px;
  font-size: 20px;
  text-align: center;
  color: rgb(0, 0, 0)
}

.container1 {
  position: relative;
  top: 75px;
  font-size: 30px;
  text-align: center;
  color: rgb(255, 253, 208)
}
p {
  padding: 30px;
  font-size: 25px;
  width: 1150px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  text-indent: 70px;
  line-height: 1.6;
  color: rgb(255, 253, 208)
}
a:link {
  color: orange;
}
a:visited {
  color: grey;
}