Is any technical problem with use own html tags in Modern browsers

Sometimes my code gets horribly ugly

Especially when I use frameworks like tailwind When the project gets big, I can say without exaggeration that 90% of my time is spent finding the desired class between elements

One of the solutions to keep the code clean is to use own tags I don't mean the new html5 tags like aside, header , footer , section , ...

for example

<div class="flex items-center justify-center p-4 rounded shadow">
   <div id="inner"> <!--  A dirty tag to prevent display flex from affecting child tags -->
      <div> somedata </div>
      <div> somedata </div>
      <div> somedata </div>
   </div>
</div>

can replaced with

<card class="flex items-center justify-center p-4 rounded shadow">
   <inner> 
      <div> somedata </div>
      <div> somedata </div>
      <div> somedata </div>
   </inner>
</card>

even in vanilla css own tag's make the code more deciplined example

<div class="post">
 <header>
  <div class="header__image">
   <img src="example.jpg">
  <div>
  <div class="header_details">
    ...
  </div>
 </header>
 <div class="post__content">
 </div>
 .....
</div>

it can be like

<post>
 <header>
    <picture>
       <img src="example.jpg">
    </picure>
 </header>
 <content>
 <p> something </p>
 <content>
 ...
</post>

Is there any Serious technical problems other than not being supported by old browsers?