Add inline HTML to posts published within last 24hrs

Basically I’m looking to add this line of code to posts published within the last 24hrs:

<span class="new">New!</span>

When the post is over 24hrs old, remove the inline HTML element.

This is my code so far but have no idea how to implement this feature, anybody got any ideas?

<section class="post-wrap">

            <ul class="filter">
                <li><a href="<?php bloginfo( 'url' ); ?>/explorers" rel="nofollow noreferrer noopener">All</a></li>
                <li><a href="<?php bloginfo( 'url' ); ?>/category/stories" rel="nofollow noreferrer noopener" class="stories">Stories</a></li>
                <li><a href="<?php bloginfo( 'url' ); ?>/category/missions" rel="nofollow noreferrer noopener" class="missions">Missions</a></li>
                <li><a href="<?php bloginfo( 'url' ); ?>/category/questions" rel="nofollow noreferrer noopener" class="questions">Questions</a></li>
            </ul>


            <?php
            $temp = $wp_query;
            $wp_query= null;
            $wp_query = new WP_Query();
            $wp_query->query('posts_per_page=10'.'&paged='.$paged);
            while ($wp_query->have_posts()) : $wp_query->the_post();
            ?>

                <?php if (in_category(3)) {?>

                <article class="mission" id="post-<?php the_ID(); ?>">
                    <a href="<?php the_permalink(); ?>" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">    
                        <div class="headline">              
                            <h1><?php the_title(); ?> <span><?php echo get_the_date(); ?></span></h1>
                            <?php global $more; $more = 0; the_content(''); ?>
                        </div>
                    <div class="pseudo-link">Accept</div>
                    </a>
                </article>

                <?php } ?>

                <?php if (in_category(4)) {?>

                    <article class="story" id="post-<?php the_ID(); ?>">
                        <a href="<?php the_permalink(); ?>" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">    
                            <span class="new">New!</span>
                            <div class="headline">              
                                <h1><?php the_title(); ?> <span><?php echo get_the_date(); ?></span></h1> 
                                <p><?php the_field('author_details'); ?></p>
                            </div>
                        <div class="pseudo-link">Read more</div>
                        </a>
                    </article>

                <?php } ?>

                <?php if (in_category(5)) {?>

                    <article class="question" id="post-<?php the_ID(); ?>">
                        <h2><?php the_title(); ?></h2>
                    </article>

                <?php } ?>

            <?php endwhile;?> 

            <div class="next-prev">
                <?php next_posts_link('Older Posts') ?>
                <?php previous_posts_link('Newer Posts') ?>
            </div>              

            <?php $wp_query = null; $wp_query = $temp; wp_reset_query(); ?>
        </section>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Compare the current time with the UNIX time stamp of the post date:

// now minus one day in seconds
if ( ( time() - 86400 ) < get_the_date( 'U' ) )
{
    echo '<span class="new">New!</span>';
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0