JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bedrock" style="text-shadow:2px 2px 2px;cursor: pointer;">Bedrock</div>
<div class="bedrock1" style="text-shadow:2px 2px 2px;cursor: pointer;">Bedrock1</div>
<div class="bedrock2" style="text-shadow:2px 2px 2px;cursor: pointer;">Bedrock2</div>

<div id="dialog" title="Bedrock" style="display:none;">
    <p>Seulement 10 bedrock pour 1€</p>
    <p>Interdiction d'utiliser de la bedrock à des fins de grief.</p>
    <p>Autorisée sur les maps qui se regénerent</p>
</div>

<div id="dialog1" title="Bedrock1" style="display:none;">
    <p>Seulement 10 bedrock pour 1€</p>
    <p>Interdiction d'utiliser de la bedrock à des fins de grief.</p>
    <p>Autorisée sur les maps qui se regénerent</p>
</div>

<div id="dialog2" title="Bedrock2" style="display:none;">
    <p>Seulement 10 bedrock pour 1€</p>
    <p>Interdiction d'utiliser de la bedrock à des fins de grief.</p>
    <p>Autorisée sur les maps qui se regénerent</p>
</div>

JavaScript

$('.bedrock').click( function() {
$('#dialog').dialog({
width: 350,
modal: true
});
});

$('.bedrock1').click( function() {
$('#dialog1').dialog({
width: 350,
modal: true
});
});

$('.bedrock2').click( function() {
$('#dialog2').dialog({
width: 350,
modal: true
});
});