JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<img src="" id="img" alt="">
<button id="btn">Кнопка</button>
<div id="text"></div>

<img src="https://avatanplus.com/files/resources/mid/56a0d5f39d0341526443bfbb.png" alt="" id="soul">
<img src="https://i.pinimg.com/originals/0c/4f/ba/0c4fba8591b489f3b1e9dfc6f0498f01.png" alt="" id="cloud">

CSS

body,html{
  background:#adfffb;
}
#img,#text{
  margin:auto;
  max-width:50%;
  background:#f8edaa;
  display:block;
  border-radius:20px;
  border:10px solid #ffca18;
}
#text{
  text-align:center;  
  padding:10px;
}
#btn:hover{
  cursor:pointer;
}
#btn{
  color:#289fcb;
  background:#f8edaa;  
  border:3px solid #ffca18;
  font-size:18px;
  outline:none;
  margin:20px auto;
  display:block;
  border-radius:20px;
}
#soul,#cloud{
  width:200px;
  position:absolute;
  left:0px;
  top:0px;
  animation:anim 5s infinite;
}
#cloud{
  left:auto;
  right:0;
  top:20px;
  animation:anim 6s infinite;
}
@keyframes anim{
  0%{
    transform:rotate(-30deg);
  }
  
  50%{
    transform:rotate(30deg);
  }
  
  100%{
    transform:rotate(-30deg);
  }
}

JavaScript

var imgs = [//массив пикч
"https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg",
"https://st2.depositphotos.com/1428083/7080/i/450/depositphotos_70801427-stock-photo-unicorn-in-the-moonlight.jpg",
"https://st.depositphotos.com/1757583/2169/i/450/depositphotos_21696885-stock-photo-yin-yang-symbol.jpg"
];

var text = [//Маасив текстов
	"текст 1 ",
  "текст 2 ",
  "текст 3 ",
  "текст 4 ",
  "текст 5 ",
  "текст 6 "
];

document.querySelector("#btn").addEventListener("click",function(){
	document.querySelector("#img").src = imgs[Math.round(Math.random() * (imgs.length -1))];  
	document.querySelector("#text").innerHTML = text[Math.round(Math.random() * (text.length -1))];
});

document.querySelector("#btn").dispatchEvent(new Event("click"))