Данный код думаю подойдет для размещения какой либо информации.
Сам код:
<table class="grid">
<tbody>
<tr>
<td>
<div class="item">Здесь можно <br>поставить текст</div>
</td>
<td>
<div class="item"><div class="tapchips_donat_modwind">
<details>
<summary>
<img src="http://ipic.su/img/img7/fs/Frame14(1).1659528714.png" width="30">
</summary>
<div class="tapchips_donat_modwind_overblock">
<div class="tapchips_donat_modwind_overblock_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie nunc sit amet urna laoreet mollis. Nunc molestie iaculis urna at mollis. Vivamus nibh sem, dictum non malesuada laoreet, pretium in enim. Phasellus sed nisl vel odio placerat ultricies. Morbi sem tortor, tempor ut enim eu, mollis laoreet felis. Quisque sem quam, finibus eget bibendum et, tempus sed metus. Mauris ultrices sagittis metus vitae aliquam. Morbi lorem elit, ornare ut mollis in, lacinia at augue. Maecenas vitae metus ac metus faucibus vehicula at eget arcu. Pellentesque luctus lorem in commodo malesuada. Integer turpis augue, consectetur sed pulvinar nec, finibus vitae neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent tincidunt finibus laoreet. Maecenas fermentum aliquet dictum.</p>
</div>
</div>
</details>
</div>
</div>
</td>
<td>
<div class="item"><div class="tapchips_pravila_modwind">
<details>
<summary>
<img src="http://ipic.su/img/img7/fs/Frame14(1).1659528714.png" width="30">
</summary>
<div class="tapchips_pravila_modwind_overblock">
<div class="tapchips_pravila_modwind_overblock_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie nunc sit amet urna laoreet mollis. Nunc molestie iaculis urna at mollis. Vivamus nibh sem, dictum non malesuada laoreet, pretium in enim. Phasellus sed nisl vel odio placerat ultricies. Morbi sem tortor, tempor ut enim eu, mollis laoreet felis. Quisque sem quam, finibus eget bibendum et, tempus sed metus. Mauris ultrices sagittis metus vitae aliquam. Morbi lorem elit, ornare ut mollis in, lacinia at augue. Maecenas vitae metus ac metus faucibus vehicula at eget arcu. Pellentesque luctus lorem in commodo malesuada. Integer turpis augue, consectetur sed pulvinar nec, finibus vitae neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent tincidunt finibus laoreet. Maecenas fermentum aliquet dictum.</p>
</div>
</div>
</details>
</div>
</div>
</td>
<td>
<div class="item"><div class="tapchips_support_modwind">
<details>
<summary>
<img src="http://ipic.su/img/img7/fs/Frame14(1).1659528714.png" width="30">
</summary>
<div class="tapchips_support_modwind_overblock">
<div class="tapchips_support_modwind_overblock_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie nunc sit amet urna laoreet mollis. Nunc molestie iaculis urna at mollis. Vivamus nibh sem, dictum non malesuada laoreet, pretium in enim. Phasellus sed nisl vel odio placerat ultricies. Morbi sem tortor, tempor ut enim eu, mollis laoreet felis. Quisque sem quam, finibus eget bibendum et, tempus sed metus. Mauris ultrices sagittis metus vitae aliquam. Morbi lorem elit, ornare ut mollis in, lacinia at augue. Maecenas vitae metus ac metus faucibus vehicula at eget arcu. Pellentesque luctus lorem in commodo malesuada. Integer turpis augue, consectetur sed pulvinar nec, finibus vitae neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent tincidunt finibus laoreet. Maecenas fermentum aliquet dictum.</p>
</div>
</div>
</details>
</div></div>
</td>
</tr>
</tbody>
</table>
<style type="text/css">
/* Контейнер для кнопки, чтобы не прыгал контент, когда она сменит позиционирование */
.tapchips_donat_modwind {
height: 60px;
display:flex;
align-items:center;
justify-content:left;
}
/* Кнопка для открытия */
.tapchips_donat_modwind summary {
display: inline-flex;
margin: 10px;
text-decoration: none;
position: relative;
padding: 5px;
background: transparent;
cursor: pointer;
border-radius: 5px;
border: 1.1px solid #999999;
overflow: hidden;
z-index: 1;
}
.tapchips_donat_modwind summary:hover,
.tapchips_donat_modwind summary:active,
.tapchips_donat_modwind summary:focus {
color: #FFF;
}
.tapchips_donat_modwind summary:before {
content: '';
position: absolute;
top: 0;
right: -50px;
bottom: 0;
left: 0;
border-right: 50px solid transparent;
border-top: 50px solid #2D6B9F;
transition: transform 0.5s;
transform: translateX(-100%);
z-index: -1;
}
/* Кнопка при открытом окне переходит на весь экран */
.tapchips_donat_modwind details[open] summary {
cursor: default;
opacity: 0;
position: fixed;
left: 0;
top: 0;
z-index: 3;
width: 100%;
height: 100%;
}
/* Контейнер, который затемняет страницу */
.tapchips_donat_modwind details .tapchips_donat_modwind_overblock {
display:flex;
align-items:center;
justify-content:center;
}
.tapchips_donat_modwind details[open] .tapchips_donat_modwind_overblock {
pointer-events: none;
z-index: 4;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation: bg 0.5s ease;
background: rgba(51, 122, 183, 0.7);
}
/* Модальное окно */
.tapchips_donat_modwind details .tapchips_donat_modwind_overblock_text {
font-family: 'Raleway';
font-size: 12px;
padding: 20px;
width: 80%;
max-width: 600px;
max-height: 70%;
transition: 0.5s;
border-radius: 4px;
background: #FFF;
text-align: left;
overflow: auto;
}
.tapchips_donat_modwind details[open] .tapchips_donat_modwind_overblock_text {
animation: scale 0.5s ease;
z-index: 4;
pointer-events: auto;
}
/* Декоративная кнопка с крестиком */
.tapchips_donat_modwind details[open] .tapchips_donat_modwind_overblock:after {
content: "";
width: 50px;
height: 50px;
border: 2px solid #333333;
border-radius: 10px;
position: absolute;
z-index: 10;
top: 20px;
right: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
background-color: #FFF;
background-size: cover;
animation: move 0.5s ease;
}
/* Анимации */
@keyframes scale {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
@keyframes move {
0% { right: -80px; }
100% { right: 20px; }
}
@keyframes bg {
0% { background: rgba(51, 122, 183, 0); }
100% { background: rgba(51, 122, 183, 0.7); }
}
<!-- / -->
/* Контейнер для кнопки, чтобы не прыгал контент, когда она сменит позиционирование */
.tapchips_pravila_modwind {
height: 60px;
display:flex;
align-items:center;
justify-content:left;
}
/* Кнопка для открытия */
.tapchips_pravila_modwind summary {
display: inline-flex;
margin: 10px;
text-decoration: none;
position: relative;
padding: 5px;
background: transparent;
cursor: pointer;
border-radius: 5px;
border: 1.1px solid #999999;
overflow: hidden;
z-index: 1;
}
.tapchips_pravila_modwind summary:hover,
.tapchips_pravila_modwind summary:active,
.tapchips_pravila_modwind summary:focus {
color: #FFF;
}
.tapchips_pravila_modwind summary:before {
content: '';
position: absolute;
top: 0;
right: -50px;
bottom: 0;
left: 0;
border-right: 50px solid transparent;
border-top: 50px solid #2D6B9F;
transition: transform 0.5s;
transform: translateX(-100%);
z-index: -1;
}
/* Кнопка при открытом окне переходит на весь экран */
.tapchips_pravila_modwind details[open] summary {
cursor: default;
opacity: 0;
position: fixed;
left: 0;
top: 0;
z-index: 3;
width: 100%;
height: 100%;
}
/* Контейнер, который затемняет страницу */
.tapchips_pravila_modwind details .tapchips_pravila_modwind_overblock {
display:flex;
align-items:center;
justify-content:center;
}
.tapchips_pravila_modwind details[open] .tapchips_pravila_modwind_overblock {
pointer-events: none;
z-index: 4;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation: bg 0.5s ease;
background: rgba(51, 122, 183, 0.7);
}
/* Модальное окно */
.tapchips_pravila_modwind details .tapchips_pravila_modwind_overblock_text {
font-family: 'Raleway';
font-size: 12px;
padding: 20px;
width: 80%;
max-width: 600px;
max-height: 70%;
transition: 0.5s;
border-radius: 4px;
background: #FFF;
text-align: left;
overflow: auto;
}
.tapchips_pravila_modwind details[open] .tapchips_pravila_modwind_overblock_text {
animation: scale 0.5s ease;
z-index: 4;
pointer-events: auto;
}
/* Декоративная кнопка с крестиком */
.tapchips_pravila_modwind details[open] .tapchips_pravila_modwind_overblock:after {
content: "";
width: 50px;
height: 50px;
border: 6px solid #BFE2FF;
border-radius: 12px;
position: absolute;
z-index: 10;
top: 20px;
right: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
background-color: #FFF;
background-size: cover;
animation: move 0.5s ease;
}
/* Анимации */
@keyframes scale {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
@keyframes move {
0% { right: -80px; }
100% { right: 20px; }
}
@keyframes bg {
0% { background: rgba(51, 122, 183, 0); }
100% { background: rgba(51, 122, 183, 0.7); }
}
<!-- / -->
/* Контейнер для кнопки, чтобы не прыгал контент, когда она сменит позиционирование */
.tapchips_support_modwind {
height: 60px;
display:flex;
align-items:center;
justify-content:left;
}
/* Кнопка для открытия */
.tapchips_support_modwind summary {
display: inline-flex;
margin: 10px;
text-decoration: none;
position: relative;
padding: 5px;
background: transparent;
cursor: pointer;
border-radius: 5px;
border: 1.1px solid #999999;
overflow: hidden;
z-index: 1;
}
.tapchips_support_modwind summary:hover,
.tapchips_support_modwind summary:active,
.tapchips_support_modwind summary:focus {
color: #FFF;
}
.tapchips_support_modwind summary:before {
content: '';
position: absolute;
top: 0;
right: -50px;
bottom: 0;
left: 0;
border-right: 50px solid transparent;
border-top: 50px solid #2D6B9F;
transition: transform 0.5s;
transform: translateX(-100%);
z-index: -1;
}
/* Кнопка при открытом окне переходит на весь экран */
.tapchips_support_modwind details[open] summary {
cursor: default;
opacity: 0;
position: fixed;
left: 0;
top: 0;
z-index: 3;
width: 100%;
height: 100%;
}
/* Контейнер, который затемняет страницу */
.tapchips_support_modwind details .tapchips_support_modwind_overblock {
display:flex;
align-items:center;
justify-content:center;
}
.tapchips_support_modwind details[open] .tapchips_support_modwind_overblock {
pointer-events: none;
z-index: 4;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation: bg 0.5s ease;
background: rgba(51, 122, 183, 0.7);
}
/* Модальное окно */
.tapchips_support_modwind details .tapchips_support_modwind_overblock_text {
font-family: 'Raleway';
font-size: 12px;
padding: 20px;
width: 80%;
max-width: 600px;
max-height: 70%;
transition: 0.5s;
border-radius: 4px;
background: #FFF;
text-align: left;
overflow: auto;
}
.tapchips_support_modwind details[open] .tapchips_support_modwind_overblock_text {
animation: scale 0.5s ease;
z-index: 4;
pointer-events: auto;
}
/* Декоративная кнопка с крестиком */
.tapchips_support_modwind details[open] .tapchips_support_modwind_overblock:after {
content: "";
width: 20px;
height: 20px;
border: 2px solid #BFE2FF;
border-radius: 12px;
position: absolute;
z-index: 10;
top: 20px;
right: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
background-color: #FFF;
background-size: cover;
animation: move 0.5s ease;
}
/* Анимации */
@keyframes scale {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
@keyframes move {
0% { right: -80px; }
100% { right: 20px; }
}
@keyframes bg {
0% { background: rgba(51, 122, 183, 0); }
100% { background: rgba(51, 122, 183, 0.7); }
}
.grid {
width: 100%;
border: none;
}
.grid td {
vertical-align: top;
padding: 0;
}
</style>