JSFiddle - React, Tailwind, and code Playground

by noname5

HTML

<!DOCTYPE html>
<html lang="ru">

<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<!-- Заворачиваем статью в див maincontent -->
<div class="maincontent">
<main>

<p>Товарищи! начало повседневной работы по&nbsp;формированию позиции позволяет выполнять важные задания по&nbsp;разработке систем массового участия. Повседневная практика показывает, что укрепление и&nbsp;развитие структуры позволяет выполнять важные задания по&nbsp;разработке систем массового участия. Разнообразный и&nbsp;богатый опыт новая модель организационной деятельности представляет собой интересный эксперимент проверки позиций, занимаемых участниками в&nbsp;отношении поставленных задач. Задача организации, в&nbsp;особенности&nbsp;же сложившаяся структура организации обеспечивает широкому кругу (специалистов) участие в&nbsp;формировании направлений прогрессивного развития.</p>


</main>

	<div class="social">
			<a id="like" onclick="like()">
				<svg style="margin-top: 7px;" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M4.66663 21H5.66663V8H4.66663C4.13619 8 3.62749 8.21071 3.25241 8.58579C2.87734 8.96086 2.66663 9.46957 2.66663 10V19C2.66663 19.5304 2.87734 20.0391 3.25241 20.4142C3.62749 20.7893 4.13619 21 4.66663 21ZM20.6666 8H13.6666L14.7886 4.632C14.8887 4.33141 14.916 4.01135 14.8682 3.69815C14.8204 3.38496 14.6988 3.08761 14.5136 2.83059C14.3284 2.57358 14.0847 2.36424 13.8027 2.21984C13.5207 2.07543 13.2084 2.00008 12.8916 2H12.6666L7.66663 7.438V21H18.6666L22.5786 12.404L22.6666 12V10C22.6666 9.46957 22.4559 8.96086 22.0808 8.58579C21.7058 8.21071 21.1971 8 20.6666 8Z" fill="#363636"/>
				</svg>
			</a>
			<a id="likeactive" style="display:none" onclick="backlike()">
				<svg style="margin-top: 7px;" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M4.66663 21H5.66663V8H4.66663C4.13619 8 3.62749 8.21071...

CSS

.maincontent { /* Задаем сетку и разметку */
  display: grid;
  grid-template-columns: 1fr;
	grid-template-rows: 1fr 1px 1fr 1px 1fr 1px 1fr 1px;
}
main {
max-width: 400px;
margin: auto;
grid-column: 1 / 2;
grid-row: 1 / 9; /* Растягиваем на всю высоту */
}

	.social {
		padding-bottom: 8px;
		background-color:white;
		text-align: center;
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: 10px;
		z-index:9999;
	}

JavaScript

let Stat = "https://example.com/click.php?event3=0.5";// Отправляем базовый рейтинг
									fetch(Stat, {
										method: 'POST' // метод отправки данных
									});

function like() {
	document.getElementById("likeactive").style.display = 'block'; //смена цвета кнопки
	document.getElementById("like").style.display = 'none'; 
  
  document.getElementById("dislikeactive").style.display = 'none'; // убираем дизлайк, если он активен
	document.getElementById("dislike").style.display = 'block'; // делаем неактивную кнопку дизлайка
	relevant = 0.9; // выставляем рейтинг новости в 0.9
  let Stat = "https://example.com/click.php?event3= + " + relevant;
									fetch(Stat, {
										method: 'POST' // метод отправки данных
									});
                  alert('Теперь рейтинг статьи ' + relevant);
  }
  
  function backlike() {
	document.getElementById("likeactive").style.display = 'none'; //смена цвета кнопки
	document.getElementById("like").style.display = 'block'; 
	relevant = 0.5; // восстанавливаем рейтинг материала
			  let Stat = "https://example.com/click.php?event3= + " + relevant;
									fetch(Stat, {
										method: 'POST' // метод отправки данных
									});
                  alert('Теперь рейтинг статьи ' + relevant);							
	}
  
  
 function dislike() {
	document.getElementById("dislikeactive").style.display = 'block'; //смена цвета кнопки	
  document.getElementById("dislike").style.display = 'none'; // скрываем неактивную кнопку дизлайка
	document.getElementById("likeactive").style.display = 'none'; //смена цвета кнопки
	document.getElementById("like").style.display = 'block'; 
	relevant = 0.1; // восстанавливаем рейтинг материала
			  let Stat = "https://example.com/click.php?event3= + " + relevant;
									fetch(Stat, {
										method: 'POST' // метод отправки данных
									});
                  alert('Теперь рейтинг статьи ' + relevant);							
	
  }
  
  function backdislike() {
	document.getElementById("dislikeactive").style.display =...