JSFiddle - React, Tailwind, and code Playground

by Олег

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="my">сообщение получено</div>

<button id="myBut" onclick="mess()">Отправить сообщение</button>














































































<div class="footer">
Помогу в решении любого вопроса js, css, html, svg, canvas, animation, php
Модули, комопненты под joomla, wordpress, opencart, modX, drupal, DLE, prestashop
Шрифты! Любые дополнительные символы к стандартным! Локализация к Вашему языку<br>Аккаунт на тостере <a href="https://toster.ru/user/politon">toster.ru/user/politon</a><br><span>E-mail: oleg@w3schools.ru</span><br><span>Skype: politon81</span>
</div>
<!--Любое решение вопросов
E-mail: oleg@w3schools.ru
js, css, html, svg, canvas, animation, php
Модули, комопненты под joomla, wordpress, opencart, modX, drupal, DLE, prestashop
Шрифты! Любые дополнительные символы к стандартным! Локализация к Вашему языку
E-mail: oleg@w3schools.ru
Skype: politon81
-->

CSS

#my{
  display:none;
  background:#D4D0C8;
}
#my:before {
     font-family: 'FontAwesome';
    content:"\f003";
    padding:0 5px 0 15px;   
} 






































































/*Это не относится к Вашему коду*/
.footer{
  position:absolute;
  bottom:20px;
  right:20px;
  font-size:0.7em;
  background:#ff0;
}
span{
  color:#f00;
  font-weight:bold;
}

JavaScript

var divMy = document.getElementById('my');
var but = document.getElementById('myBut');
function mess(){
  but.style = 'background:green;color:#fff';
  but.innerHTML = 'Сообщение отправляется';
  setTimeout( function(){
  divMy.style = 'display:block';
  but.style = 'display:none';
  divMy.innerHTML = 'Сообщение отправлено<audio src=\"http://jay.mobile9.com/download/media/702/oggyndcock_rGyin0LO.mp3" autoplay>Your browser does not support the <code>audio</code> element.</audio>'
},3000);
}