JSFiddle - React, Tailwind, and code Playground

by Misko Y

HTML

<!DOCTYPE html>
<html lang='sr'>
    <head>
        <meta charset='utf-8'/>
        <meta name='author' content='Милош Утвић' />
        <meta name='description' content='CSS-селектори засновани на контексту, избор братских/сестринских елемената. CSS-селектори засновани на позицији произвољног детета, односно позицији детета одређеног типа. Карактерски ентитети у HTML-у и CSS-у' />
        <meta name='keywords' content='Дигитални текст 2, пример, HTML5, CSS, селектори братских/сестринских елемената, позициони селектори, карактерски ентитети' />
        <title>Контекстни и позициони CSS-селектори</title>
        
        <style>
        /* спољашње и унутрашње маргине и дебљина ивица улазе у ширину свих елемената */

		* { box-sizing: border-box;}

		/* CSS-бројачи за чланке, слике, табеле и CSS-примере (на нивоу документа) */
          
        body {
          counter-reset: brclanaka brslika brtabela brfigoznaka;
        }

        
        /* CSS-директива којом се дефинише стил нумерације помоћу слова српске ћирилице */
        @counter-style mala-cirilica {
            system: fixed; /* користе се сви симболи док се не потроше, онда се користи подразумевана нумерација*/
            
            symbols: а б в г д ђ е ж з и ј к л љ м н њ о п р с т ћ у ф х ц ч џ ш;
        }        

        figure.slika {
           margin-left: auto;
           margin-right: auto;
           text-align: center;
           counter-reset: brpodslika;
        }
    
        figure.slika > figcaption {
           font-size: 90%;
           counter-increment: brslika;
        }
        
        figure.slika > figcaption::before {
           content: 'Слика ' counter(brslika) ': ';
           font-weight: bold;
        }


        figure.podslika > figcaption {
           font-size: 90%;
           counter-increment: brpodslika;
        }

        figure.podslika > figcaption::before {
        /* lower-serbo-croatian нажалост још увек не ради, а стил који смо сами дефинисали,...

CSS

/* спољашње и унутрашње маргине и дебљина ивица улазе у ширину свих елемената */

* { box-sizing: border-box;}

/* CSS-бројачи за чланке, слике, табеле и CSS-примере (на нивоу документа) */

body {
  counter-reset: brclanaka brslika brtabela brfigoznaka;
}


/* CSS-директива којом се дефинише стил нумерације помоћу слова српске ћирилице */
@counter-style mala-cirilica {
  system: fixed; /* користе се сви симболи док се не потроше, онда се користи подразумевана нумерација*/

  symbols: а б в г д ђ е ж з и ј к л љ м н њ о п р с т ћ у ф х ц ч џ ш;
}        

figure.slika {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  counter-reset: brpodslika;
}

figure.slika > figcaption {
  font-size: 90%;
  counter-increment: brslika;
}

figure.slika > figcaption::before {
  content: 'Слика ' counter(brslika) ': ';
  font-weight: bold;
}


figure.podslika > figcaption {
  font-size: 90%;
  counter-increment: brpodslika;
}

figure.podslika > figcaption::before {
  /* lower-serbo-croatian нажалост још увек не ради, а стил који смо сами дефинисали, mala-cirilica, ради само у Firefox-у */
  content: counter(brpodslika, mala-cirilica) ') ';
  font-weight: bold;
}


a.refSlika::before {
  content: 'Слика ';
}


/* Одломак из Ђавољег речника */      

dl#birsj {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/57/Abierce.jpg');
  background-repeat: no-repeat;
  background-position: right;
  background-size: 200px;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

dl#birsj > dt {
  font-weight: bold;
}

dl#birsj > dd {
  visibility: hidden;
}

dl#birsj > dt:hover + dd {
  visibility: visible;
  display: inline-block;
  border: solid 1px black;
  width: 20em;
  padding: 5px;
}




/* Мај 2020 (1. верзија) */

table#maj2020 {
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}

table#maj2020 th,
table#maj2020 td {
  text-align: center;
  font-weight: bold;
}

table#maj2020 th {
 ...